下拉菜单,下拉菜单宽度,下拉菜单高度,下拉菜单样式,下拉菜单链接

下拉菜单2011-05-13 23:34:25
新浪微博  

CSS代码:

/*下拉菜单样式*/

*{margin:0;padding:0;border:0;}

#div_center { width:900px; height:23px; margin-left: auto;margin-right:auto;} /*定义总体宽度、高度； 控制背景颜色,居中对齐*/

#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;}

.meizi {height:19px;line-height:19px;background:url(Skin/sealove/BG_line.gif) repeat-x;}

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() {

this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),

"");

}

}

}

window.onload=menuFix

//--></script>

<div id=div_center>

<UL id=nav>

<LI><A href="{$InstallDir}index.asp">网站首页</A></LI>

<LI><A href="{$InstallDir}Article/Index.asp">艺术世界</A>

<UL>

<LI><A href="{$InstallDir}Article/ShowClass.asp?ClassID=141">·精彩书画</A></LI>

</UL></LI>