css だけでドロップメニュー

html サンプル

<ul class="dropmenu">
    <li><a href="#">menu</a>
        <ul>
           <li><a href="#">sub1</a></li>
           <li><a href="#">sub2</a></li>
           <li><a href="#">sub3</a></li>
           <li><a href="#">sub4</a></li>
        </ul>
    </li>
    <li><span>menu</span>
        <ul>
            <li><a href="#">sub1</a></li>
            <li><a href="#">sub2</a></li>
            <li><a href="#">sub3</a></li>
        </ul>
    </li>
    <li><span class="drop">menu</span>
        <ul>
            <li><a href="#">sub1</a></li>
            <li><a href="#">sub2</a></li>
            <li><a href="#">sub3</a></li>
        </ul>
    </li>
    <li>&nbsp;</li>
</ul>

CSS

.dropmenu{
   padding: 0;
   white-space: nowrap;
   font-size: 14px;
}
.dropmenu:after{ content: ""; display: block; clear: both; }
ul.dropmenu{  margin: 0; padding: 0; }
.dropmenu ul{
   position: absolute;
   z-index: 9999;
   margin: 0;
   padding: 0;
 }
.dropmenu li{
   list-style-type: none;
   position: relative;
   width: 100px;
   float: left;
   height: 27px;
   background: #0068b7;
   text-align: center;
}
.dropmenu li a{
   display: block;
   height: 27px;
   line-height: 27px;
   vertical-align: middle;
   color: #ffffff;
   text-decoration: none;
}
.dropmenu li span{
   display: table-cell;
   width: 100px;
   height: 27px;
   line-height: 27px;
   vertical-align: middle;
   background: #0068b7;
   color: #ffffff;
   text-decoration: none;
   cursor: pointer;
}
.dropmenu li ul li a{
   height: 27px;
   line-height: 27px;
   vertical-align: middle;
   border-top: 1px solid #0068b7;
   background: #003f8e;
   text-align: center;
}
.dropmenu li:hover > a{ background: #003f8e; }
.dropmenu li a:hover, .dropmenu li span:hover{ background: #192f60;  }
.dropmenu li ul li{
   overflow: hidden;
   height: 0;
   transition: .7s;
}
.dropmenu li:hover ul li{
   overflow: visible;
   height: 27px;
}

CSS のポイントは、
:after疑似要素で float解除
li a と li span 各々で、height と line-height 同じサイズで、vertical-align: middle;
これは、li の高さだけを指定すると、vertical-align: middle が効かないからだ。
li:hover > a　で選択候補色
li ul li　を
overflow: hidden;
height: 0;
transition: .7s; overflow: hidden;
で時間をかけてドロップメニューの開閉
.dropmenu li a:hover, .dropmenu li span:hover{ background: #192f60; }　で選択色