JSFiddle - React, Tailwind, and code Playground

by Gonzalo

HTML

<div id="menu">
<ul>
  <li class="nivel1"><a href="#" class="nivel1">Opción 4</a>
    <ul>
        <li><a href="#">Opción 4.1</a></li>
        <li><a href="#">Opción 4.2</a></li>
        <li><a href="#">Opción 4.3</a></li>
        <li><a href="#">Opción 4.4</a></li>
    </ul>
</li>
  <li class="nivel1"><a href="#" class="nivel1">Opción 5</a>
    <ul>
        <li><a href="#">Opción 5.1</a></li>
        <li><a href="#">Opción 5.2</a></li>
        <li><a href="#">Opción 5.3</a></li>
    </ul>
</li>
</ul>
</div>

CSS

#menu {  
    text-align: center;
    font-size: 0.7em;
    width: 820px;
    margin: 20px auto;
}
#menu ul { list-style-type: none;}
#menu ul li.nivel1 { 
    float: left;
    width: 162px;
    margin-right: 2px;
}
#menu ul li a {
    display: block;
    text-decoration: none;
    color: #fff;
    background-color: #399;
    border: solid 1px #fff;
    padding: 8px;
    position: relative;
}
#menu ul li:hover {
    position: relative;
}
#menu ul li a:hover, #menu ul li:hover a.nivel1 {
    background-color: #6CC;
    color: #000;
    position: relative;
}
#menu ul li a.nivel1 {
    display: block!important;display: none;
    position: relative;
}
#menu ul li ul {
    display: none;
}
#menu ul li a:hover ul, #menu ul li:hover ul {
    display: block;
    position: absolute;left: 0px;
}
#menu ul li ul li a {
    width: 160px;
    padding: 6px 0px 8px 0px;
    border-top-color: #000;
}
#menu ul li ul li a:hover {
    border-top-color: #000;
    position: relative;
}