<ul id="menubar">
<li><a href="#">Home</a></li>
<li><a href="#">Menu 1</a>
<ul class="sub1">
  <li><a href="#">Menu 1.1</a></li>
  <li><a href="#">Menu 1.2</a></li>
  <li><a href="#">Menu 1.3</a></li>
  <li><a href="#">Menu 1.4</a></li>
  <li><a href="#">Menu 1.5</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a>

</li>
<li><a href="#">Menu 5</a></li>
<li><a href="#">Menu 6</a></li>

</ul>

body{
  font-family:serif;
  font-size: 20px;
}
#menubar{
   
}
#menubar li{
  width: 125px;
  text-align: center;
  position: relative;
  float: left;
  margin-right: 1px;
  list-style: none;
}
#menubar a{
  text-decoration: none;
  display: block;
  border: 1px solid #000000;
  background-color:#423b3b;
  padding: 15px;
  color: #ffffff;
  line-height: 24px;
  border-bottom:1px;
  box-shadow:0px 2px 3px rgba(0,0,0,2) inset;  
}
#menubar ul.sub1{
  display: none;
  position: absolute;
  left: 15px;
}
#menubar li:hover .sub1{
  display: block;
}
#menubar a:hover{
  background: #ff7300;
  color:#423b3b;
}
#menubar .sub1 a:hover{
  background-color: #196962;
}