<ul>
<li>item</li>
<li>item
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</li>
<li>item
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
ul{
display:flex;
background:grey;
}
li{
flex-grow:1;
text-align:center;
cursor:pointer;
list-style-type:none;
position:relative;
height:30px;
line-height:30px;
}
li ul{
display:none;
position:absolute;
left:0;
top:30px;
background:red;
width:100%;
}
li:hover ul{
display:block;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.