JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="menu">
                <li><a href="#">Home</a></li>
                <li><a href="#">Item1</a>
                    <ul>
                        <li><a href="#">SubItem1</a>
                        <ul>
                            <li><a href="#">Sub1</a></li>
                            <li><a href="#">Sub2</a></li>
                         </ul>
                        </li>
                        <li><a href="">SubItem2</a>
                                                    <ul>
                            <li><a href="#">Sub1</a></li>
                            <li><a href="#">Sub2</a></li>
                         </ul>
                        </li>
                       
                    </ul>
                </li>
                <li><a href="LogForm.aspx">Item2</a></li>

CSS

#menu{
width:952px;
height:36px;
line-height:36px;
padding:0 0 0 32px;
background-image:url(/images/menu_bg.gif);
background-position:top left;
background-repeat:repeat-x;
     position:relative;
 z-index:100;
float:left;
}
#menu li{
display:inline;
list-style-type:none;
float:left;
     position:relative;
 z-index:100;
}
#menu li a{
font-family:Tahoma;
font-size:11px;
color:black;
text-decoration:none;
margin:0 15px;
padding:3px 8px;
display: block;
}
#menu li > ul
{
    display: none;
    line-height: 20px;
    height: 20px;
}
#menu li:hover ul{
   display: block;
   position:absolute;
   margin: -5px ;
}
#menu li:hover li{
   float: none; }
#menu li:hover li a{
   background-color: #0C325F;
   border-bottom: 1px solid #0C325F;
   color: #D2DEEC; }
#menu li li a:hover {
   background-color: #8db3ff; }