JSFiddle - React, Tailwind, and code Playground

by jsfiddlerockinthemiddle

HTML

<div id="menu">
            <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Social</a>
                <ul>
                <li>Groups</li>
                <li>Members</li>
                <li>People</li>
                <li>Action</li>
                <li>Learn</li>
                </ul>
            </li>
            </ul>
        </div>

CSS

#menu
{
    height:40px;
    padding:2px;
}
#menu ul
{
    list-style:none;
    margin:0px;
    padding:10px;
}
#menu ul li
{
    display:inline;
    padding:10px;
}
#menu a
{
    text-decoration:none;
    padding:8px;
    color:teal;
}
#menu a:hover
{
    background:url(../nav.jpg);
    background-repeat:repeat-x;
    height:70px;
    padding:8px;
    color:black;
}
#menu ul ul
{
    display:none;
}
#menu ul li
{
    border-right:1px solid red;
}
#menu ul li:hover ul 
{
    border:none;
    display:list-item;
    margin-left:81px;
    padding:14px;
}
#menu ul li ul li
{
    border-left: 1px solid red;
    color: #065f99;
    display:block;
    position:relative;
    width:82px;
    background:#fff;

}