<ul class="menu">
  <li>
    <a href="#">MENU 1</a>
    <ul class="depth_1">
      <li><a href="#">MENU 1_1</a></li>
      <li><a href="#">MENU 1_2</a></li>
      <li><a href="#">MENU 1_3</a></li>
    </ul>
  </li>
  <li>
    <a href="#">MENU 2</a>
  </li>
  <li>
    <a href="#">MENU 3</a>
    <ul class="depth_1">
      <li><a href="#">MENU 3_1</a></li>
      <li><a href="#">MENU 3_2</a></li>
    </ul>
  </li>
</ul>
*{margin:0; padding:0;}
ul{list-style:none;}
a{text-decoration:none; color:#333;}
.menu:after{display:block; content:''; clear:both;}
.menu > li{position:relative; float:left; margin-right:5px;}
.menu > li > a{display:block; padding:0 15px; background:#333; height:40px; line-height:40px; color:#fff;}
.menu > li:hover .depth_1 {display:block;}
.menu .depth_1{display:none; position:absolute; left:0; right:0; text-align:center;}
.menu .depth_1 a{display:block; padding:5px; background:#666; color:#fff;}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.