JSFiddle - React, Tailwind, and code Playground

by Victor

HTML

<ul id="pageNav">
	<li><a href="#">Cameras</a>
                <span class="navicon"></span>

	</li>
	<li><a href="#">Time &amp; Attendance</a>
	<span><a href="#">Second Item</a></span>
	<span><a href="#">Second Item</a></span>
	<span><a href="#">Second Item</a></span>
	<span><a href="#">Second Item</a></span>
                <span class="navicon"></span>
	</li>
	<li><a href="#">Others</a>
	<span><a href="#">Second Item</a></span>
	<span><a href="#">Second Item</a></span>
	<span><a href="#">Second Item</a></span>
        <span class="navicon"></span>
	</li>
	<li><a href="#">Menu Item</a>
		<span><a href="#">Second Item</a></span>
		<span><a href="#">Second Item</a></span>
		<span><a href="#">Second Item</a></span>
		<span><a href="#">Second Item</a></span>
        <span class="navicon"></span>
	</li>
	<li><a href="#">Menu Item</a>
                <span class="navicon"></span>
	</li>
</ul>

CSS

#pageNav {
	    background: -moz-linear-gradient(top, #000000 0%, #666666 50%, #000000 100%);
	    /* FF3.6+ */
	    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000000), color-stop(50%, #666666), color-stop(100%, #000000));
	    /* Chrome,Safari4+ */
	    background: -webkit-linear-gradient(top, #000000 0%, #666666 50%, #000000 100%);
	    /* Chrome10+,Safari5.1+ */
	    background: -o-linear-gradient(top, #000000 0%, #666666 50%, #000000 100%);
	    /* Opera 11.10+ */
	    background: -ms-linear-gradient(top, #000000 0%, #666666 50%, #000000 100%);
	    /* IE10+ */
	    background: linear-gradient(top, #000000 0%, #666666 50%, #000000 100%);
	    /* W3C */
	    height:auto;
	    list-style-type:none;
	    padding:0;
	}
	#pageNav li a {
	    margin: 0;
	    width:100%;
	    padding: 4px 0;
	    border-top: rgba(200, 200, 200, .2) solid 1px;
	    border-bottom: solid 1px #000000;
	    display:block;
	    color:white;
	    text-decoration:none;
	    font-size:1.4em;
	    font-weight:700;
	    font-family:arial;
	    text-shadow:3px 3px 4px #000000;
	    text-align:left;
    text-indent:10px;
	}
	#pageNav li {
	    background:none;
    position:relative;
    top:0;
	}
	#pageNav li a:hover {
	    background:rgba(250, 250, 250, .07)
	}
ul#pageNav li span {
    width:100%;
    height:100%;
    display:block;
    text-align:center;
}
#pageNav span a { font-size:.8em; text-indent:40px;}
span.navicon {
    position:absolute;
    top:10px;
    right:10px;
    display:block;
     width:0px !important; 
  height:0px !important; 
  border-bottom:10px solid transparent;  /* left arrow slant */
  border-top:10px solid transparent; /* right arrow slant */
  border-left:15px solid red; /* bottom, add background color here */
  font-size:0px;
  line-height:0px;
}

JavaScript

$('li > span').not($('.navicon')).hide();

$('ul#pageNav li').click( function(){
   $(this).find('span').not($('.navicon')).slideToggle(200); 
});