css代碼：

/*下拉菜單樣式*/

*{margin:0;padding:0;border:0;}
#div_center { width:790px; height:23px; background:#003399; margin-left: auto;margin-right:auto;} /*定義總體寬度、高度；background:003399; 控制背景顏色,居中對齊*/
#nav { line-height: 20px; list-style-type: none; margin-top:5px;} /*控制一級菜單行高；上邊距5px；*/
#nav a { display: block; width: 77px; text-align:center; font-size:12px;} /*一級菜單鏈接總體樣式：每個菜單的寬，居中對齊，文字大小*/
#nav a:link { color:#FFF; text-decoration:none;margin:0;} /* 未訪問的鏈接 */
#nav a:visited {color:#FFF;text-decoration:none;margin:0;} /* 已訪問的顏色 */
#nav a:hover {color:#C00;text-decoration:none;} /* 鼠標在鏈接上 */

#nav li {float: left;} /* 一級菜左對齊 */
#nav li a:hover{background:#FFFFFF;} /* 鼠標在一級菜單上改變其背景色 */
#nav li ul {line-height: 24px; background:#FFF; list-style-type: none;text-align:left;left: -999em; width:132px; position: absolute;border-width: 1px;border-top-style: none;border-right-style: solid;border-bottom-style: solid;border-left-style: solid;border-color: #003399; padding:1px;} /*二級菜單總體樣式：行高24px；背景顏色；外框寬度；相對位置；邊框一個象素，上邊沒樣式，左右下邊實線，邊框顏色#003399；內邊距1個象素*/

#nav li ul a{display:block; width: 130px;text-align:left;padding-left:2px;} /* 二級菜單鏈接樣式；背景寬度、左對齊，左縮進2 */
#nav li ul a:link {color:#0d5097; text-decoration:none;} /* 未訪問的鏈接 */
#nav li ul a:visited {color:#0d5097;text-decoration:none;} /* 已訪問的鏈接 */
#nav li ul a:hover {color:#FFF;text-decoration:none;font-weight:normal;background:#003399;}/* 鼠標在鏈接上 */

#nav li:hover ul {left: auto;}
#nav li.sfhover ul {left: auto;}
#content {clear: left;}

DIV代碼：

<script type=text/javascript>
<!--
function menuFix() {
var sfEls = document.getElementById("nav").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i ) {
sfEls[i].onmouseover=function() {
this.className =(this.className.length>0? " ": "") "sfhover";
}
sfEls[i].onMouseDown=function() {
this.className =(this.className.length>0? " ": "") "sfhover";
}
sfEls[i].onMouseUp=function() {
this.className =(this.className.length>0? " ": "") "sfhover";
}
sfEls[i].onmouseout=function() {

查看更多 動易Cms教程  動易Cms模板