JSFiddle - React, Tailwind, and code Playground

by chridam

HTML

<div class="codropsmenu1" id="menu">
    <ul>
        <li><a href="" class="first"><span>Home</span></a></li>
        <li><a href=""><span>About</span></a></li>
        <li><a href=""><span>Portfolio</span></a></li>
        <li><a href=""><span>Contact</span></a></li>
        <li><a href=""><span>Support</span></a></li>
        <li><a href="" class="last"><span>Login</span></a></li>
    </ul>
</div>

CSS

.codropsmenu1{

    padding:3px;
    height:30px;
    background-color:#282828;
}
.codropsmenu1 ul{
    list-style:none;
    margin:0px;
    padding:0px;
}
.codropsmenu1 ul li{
    display:inline;
    position:relative;
}
.codropsmenu1 ul li a{
    float:left;
    height:28px;
    line-height:30px;
    text-align:center;
    text-decoration:none;
    display:block;
    background-color:#282828;
    font-size:12px;
    color:#DDDFDF;
    text-shadow: 0 1px 0 #000000;
    border-right:1px solid #000;
    border-left:1px solid #404040;
    border-top:1px solid #282828;
    border-bottom:1px solid #282828;
    outline:none;
    cursor:pointer;
    overflow:hidden;
}
.codropsmenu1 ul li a.last{
    border-right:1px solid #282828;
}
.codropsmenu1 ul li a.first{
    border-left:1px solid #282828;
}
.codropsmenu1 ul li a:hover,
.codropsmenu1 ul li a.selected{
    background-color:#404040;
    border-top:1px solid #111;
    border-bottom:1px solid #111;
    color:#fff;
}

JavaScript

$("#menu > ul > li").each(function() { //select all top level li tags
        $width = $(this).width(); //get the width
        $(this).find("ul > li > a").width($width); //set the width of all links within submenus
    //$(this).find("ul > li > a").css('width', $width/$(this).length) + 'px');
    });