奇新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%;}

参考来源

• http://cms.zfqjava.com.cn/archive/article/1/article-1638.html