奇新CMS/menubar菜单代码及样式
来自站长百科
<div id="menubar"></div>栏目列表，根据需要也可显示子栏目列表，支持单行、双行菜单显示，子菜单宽度自适应。
代码如下：
<div id="menubar" > <ul class="menuList clearfix"> <li><a href="#">栏目名称</a></li> <li><a href="#" title="栏目名称">栏目名称（包含子菜单）</a> <ul class="subMenuList"> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a> <li><a href="#">子菜单</a></li> <li><a href="#">子菜单</a> </li> </ul> </li> <li><a href="#">栏目名称</a></li> <li class=”last”><a href="#">栏目名称</a></li> </ul> </div>
说明：
- 单行、双行使用样式不同。
单行菜单代码如下：
<ul class="menuList clearfix">…</ul>
双行菜单代码如下：
<ul class="menuList_two clearfix">…</ul>
- .last用于扩展定义最后一个样式的特别定义，.subMenuList为子菜单样式。
CSS样式示例：
#menubar{background:#96C2F1;position:relative;}
.menuList{height:45px;padding:0 30px ;line-height:45px;}
.menuList li {float:left;_display:inline;width:95px;text-align:center;border-right:1px solid #999;}
.menuList li.last{background:none}
.menuList li a{text-decoration:none;outline:none;;color:#222!important;
text-align:center;width:95px;display:block;height:45px;}
.menuList li a:hover{;color:#fff!important;text-decoration:none; }
.menuList li ul.subMenuList { display:none; border:1px solid #999;border-width:1px 1px 0;}
.menuList li ul.subMenuList li{padding:0;margin:0;line-height:24px;height:24px;float:none;border:0;
background:none;border-bottom:1px solid #999;}
.menuList li ul.subMenuList li a{padding:0 1.5em;;background:none;line-height:24px;height:24px;}
.menuList li ul.subMenuList li a:hover{padding:0 1.5em;;background:#abd8e3;}
#menubar .menuList LI.sfhover{position:relative;}
#menubar .menuList LI.sfhover .subMenuList {background:#96C2F1;; DISPLAY: block;LEFT: -1px; POSITION: absolute; top:45px;}
#menubar .menuList LI.sfhover .subMenuList li{margin:0;text-align:center;padding:0;background:none;}
#menubar .menuList LI.sfhover .subMenuList li a:hover{text-decoration:none;background:#abd8e3;}
#menubar li a{overflow:hidden;}
#menubar ul.subMenuList { text-align:left;width:auto}
#menubar ul.subMenuList li{width:100%;white-space:nowrap;text-align:left}
#menubar ul.subMenuList li a{padding:0 1.5em;;width:auto;_width:100%;text-align:left;overflow:visible}
#menubar ul.subMenuList li a:hover{padding:0 1.5em;;;width:auto;_width:100%;}