這個其實很簡單啊,用hover就行。
下面是例子:
css代碼
<style?type="text/css"> body{background:#566;} ul{margin-left:?0;padding-left:?0} li{display:inline-block;
color:?#fff;
font-size:?20px;
line-height:?30px;
font-weight:?bold;
text-align:?center;
} .menuitem{float:?left;
width:?120px;
list-style:?none;
} .submenuitem{display:?none;
float:?none;
margin-left:?0;
list-style:?none;
border:?dotted?#e00;
border-width:?0?0?2px?0;
} .menuitem:hover{background-color:#b00;
} .menuitem:hover?.submenuitem{display:?block;
background-color:#b00;
}</style>
HTML代碼
<ul> <li?class="menuitem">首頁</li> <li?class="menuitem">學校概況
<ul>
<li?class="submenuitem">學校簡介</li> <li?class="submenuitem">現任領導</li> <li?class="submenuitem">信息公開</li></ul>
</li> <li?class="menuitem">機構設置</li></ul>
效果大概其就是妳想要的那種,不用js,鼠標經過時自動出現