<style type="text/css">
*{padding: 0; margin: 0; list-style: none;}
.list1 > a{text-decoration: none; color: #fff;}
.list1{position: relative; width: 100px; height: 36px; line-height: 36px; text-align: center; border-bottom: 1px solid #ddd; background: #2144A0;}
.menu1,.menu2{border: 1px solid #ddd; width: 100px; border-bottom: none;}
.menu2{display: none; width: 100px; position: absolute; left: 100px; top: -1px; z-index: 998;}
.list2{border-bottom: 1px solid #ddd;}
.list2 > a{text-decoration: none; color: #999;}
.list1:hover > a{color: #999;}
.list2:hover a{color: blue;}
.list1:hover .menu2{display: block;}
</style>
<div>
 <ul class="menu1">
  <li class="list1">
   <a href="#">AAAAA</a>
   <ul class="menu2">
    <li class="list2"><a href="#">11111</a></li>
    <li class="list2"><a href="#">22222</a></li>
    <li class="list2"><a href="#">33333</a></li>
   </ul>
  </li>
  <li class="list1"><a href="#">BBBBB</a></li>
  <li class="list1"><a href="#">CCCCC</a></li>
 </ul>
</div>