簡單CSS下拉菜單

<style>
*{font:normal normal 14px/1.5em "宋體";}

li{list-style:none;}
span{display:block;line-height:25px;}

a{text-decoration:none;display:block;margin:5px;}

 

.class1{
width:100px;
height:25px;
overflow-y:hidden;
border:1px solid #ffe663;
text-align:center;
background:#fff2d9;
}

.class2{
width:100px;
height:135px;
overflow-y:hidden;
border:1px solid #ffe663;
text-align:center;
background:#fff2d9;
}

a:hover{
border:1px dashed red;
}
</style>

<div>
<li οnmοuseοver="this.className='class2'" οnmοuseοut="this.className='class1'" class="class1">
<span>下掛菜單</span>
<a href="#">萬水千山</a>
<a href="#">萬種風情</a>
<a href="#">萬山千水</a>
<a href="#">萬馬奔騰</a>
</li>
</div>