JSFiddle - React, Tailwind, and code Playground

by Chuan Shao

HTML

<iframe style="width:100%">padding</iframe>
<div class="container">
  <div id="menu">
    <ul>
        <li><center>item1</center>
                <ul>
                <li><a href="f1.html">A</a></li>
                <li><a href="f2.html">B</a></li>
                <li><a href="f3.htmll">C</a></li>
                </ul>
        </li>   
    </ul>
  </div>
</div>

CSS

.container {
  text-align: center;
}
#menu > li:hover ul
{
display:block;
}
#menu * { 
    padding:0; 
    margin: 0; 
    font: 12px georgia; 
    list-style-type:none;
    }
#menu { 
  display: inline-block;
}
#menu a { 
    display: block; 
    text-decoration: none; 
    color: #3B5330;
}
#menu a:hover { 
    background: #B0BD97;
}
#menu ul { 
   }
#menu ul li ul li a:hover { 
    background: #ECF1E7; 
    padding-left:9px;
    border-left: solid 1px #000;
}
#menu ul li ul li {
    width: 140px; 
    border: none; 
    color: #B0BD97;  
    padding-top: 3px; 
    padding-bottom:3px; 
    padding-left: 3px; 
    padding-right: 3px; 
    background: #B0BD97;
    z-index:1;
}
#menu ul li ul li a { 
    font: 11px arial; 
    font-weight:normal; 
    font-variant: small-caps; 
    padding-top:3px; 
    padding-bottom:3px;
}
#menu ul li {
    float: left; 
    width: 146px; 
    font-weight: bold; 
    border-top: solid 1px #283923; 
    border-bottom: solid 1px #283923; 
    background: #979E71;
    }
#menu ul li a { 
    font-weight: bold;
    padding: 15px 10px;
}
#menu li{ 
    position:relative; 
    float:left;
    }
#menu ul li ul, #menu:hover ul li ul, #menu:hover ul li:hover ul li ul{ 
    display:none;
    list-style-type:none; 
    width: 140px;
    bottom: 0;
}
#menu:hover ul, #menu:hover ul li:hover ul, #menu:hover ul li:hover ul li:hover ul { 
    display:block;
}
#menu:hover ul li:hover ul li:hover ul { 
    position: absolute;
    margin-left: 145px;
    margin-top: -22px;
    font: 10px;
}
#menu:hover ul li:hover ul { 
    position: absolute;
    margin-top: 1px;
    font: 10px;
}
#menu>ul>li:hover>ul { 
    bottom:100%;
    border-bottom: 1px solid transparent
}