<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;
}