简单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>