JSFiddle - React, Tailwind, and code Playground

HTML

<div id="nav">
            <ul>
                <li><span class="span" style="display: block;"></span><a href="#top" class="selected">Home</a></li>
                <li><span class="span" style="display: none;"></span><a href="#about">About</a></li>
                <li><span class="span" style="display: none;"></span><a href="#services">Services</a></li>
                <li><span class="span"></span><a href="#portfolio">Portfolio</a></li>
                <li><span class="span"></span><a href="#blog">Blog</a></li>
                <li class="odd"><span class="span"></span><a href="#contact">Contact</a></li>
            </ul>
        </div>

CSS

ul.listing {
margin:0;
padding:20px 0 0;
}
ul.listing li {
background-image:url("../images/bullet.png");
background-position:left center;
background-repeat:no-repeat;
color:#999999;
font-size:1.2em;
list-style-image:none;
padding:0 0 5px 25px;
}
ul.listing_cont {
margin:0;
padding:20px 0 0 15px;
}
ul.listing_cont li {
background-image:url("../images/bullet.png");
background-position:left center;
background-repeat:no-repeat;
color:#999999;
font-size:1.2em;
list-style-image:none;
padding:0 0 5px 25px;
}
ul.tags {
margin:0;
padding:15px 0 30px;
}
ul.tags li {
color:#999999;
font-size:1.2em;
list-style-image:none;
padding:0 0 5px 15px;
}
ul.tags li a {
color:#666666;
}
ul.tags li a.active {
color:#339900;
}
#nav ul {
border-color:-moz-use-text-color -moz-use-text-color -moz-use-text-color #EDEDED;
border-style:none none none solid;
border-width:medium medium medium 4px;
float:left;
list-style:none outside none;
margin:0;
padding:0;
}
#nav ul li {
clear:both;
display:block;
float:left;
margin:0 0 20px;
width:100%;
}
#nav ul li.odd {
clear:both;
display:block;
float:left;
margin:0;
}
#nav ul li a {
color:#333333;
display:block;
float:left;
font-size:1.2em;
margin:0;
padding:0 0 0 20px;
text-decoration:none;
}
#nav ul li a:hover {
border:medium none;
color:#339900;
margin:0 0 0 0;
padding:0 0 0 20px;
}
#nav .selected {
border:medium none;
color:#339900;
margin:0 0 0 0;
padding:0 0 0 20px;
}
#nav .span {
background-color:#339900;
display:none;
float:left;
height:20px;
margin:0 0 0 -4px;
padding:0;
width:4px;
}

JavaScript

$(function() {
    $('#nav ul li').hover(
        function(){            
            $(this).children('span').stop(true,true).slideDown(200);
        },
        function(){
            if (!$(this).children('a').hasClass('selected'))
                $(this).children('span').stop(true,true).slideUp(200);
    });    
});