DIV结构如下：
　　 │body {}　/*这是一个HTML元素*/
　　 └. m_menu {}　/*页面层容器*/
　　　　　 ├# jieqi_menu {}　/*标题栏目*/

html代码如下：

<div class="m_menu">
<ul id="jieqi_menu">
<li><a href="#">返回首页</a></li>
<li><a href="#">本站新闻</a></li>
<li><a href="#">在线书库</a>
<ul>
<li><a href="#">分类阅读</a></li>
<li><a href="#">排 行 榜</a></li>
</ul>
</li>
<li><a href="#">电子书店</a>
<ul>
<li><a href="#">全部书籍</a></li>
</ul>
</li>
<li><a href="#">在线漫画</a>
<ul>
<li><a href="#">分类阅读</a></li>
<li><a href="#">漫画排行</a></li>
</ul>
</li>
<li><a href="#">个人空间</a></li>
<li><a href="#">圈子交友</a></li>
<li><a href="#">分类信息</a></li>
<li><a href="#">你问我答</a></li>
<li><a href="#">帐户冲值</a></li>
<li><a href="#">访客留言</a></li>
<li><a href="#">投票调查</a></li>
<li><a href="#">交流论坛</a>
<ul>
<li><a href="#">论坛首页</a></li>
<li><a href="#">论坛搜索</a></li>
</ul>
</li>
<li><a href="#">用户面板</a>
<ul>
<li><a href="#">收 件 箱</a></li>
<li><a href="#">会 客 室</a></li>
<li><a href="#">小说书架</a></li>
<li><a href="#">电子书书架</a></li>
<li><a href="#">我的电子书</a></li>
<li><a href="#">帐户冲值</a></li>
<li><a href="#">申请作者</a></li>
<li><a href="#">修改资料</a></li>
<li><a href="#">会员列表</a></li>
<li><a href="#">退出登录</a></li>
</ul>
</li>
<li><a href="#">作家工具</a>
<ul>
<li><a href="#">新建小说</a></li>
<li><a href="#">我的小说</a></li>
<li><a href="#">新建草稿</a></li>
<li><a href="#">草 稿 箱</a></li>
<li><a href="#">新建电子书</a></li>
<li><a href="#">我的电子书</a></li>
<li><a href="#">新建漫画</a></li>
<li><a href="#">我的漫画</a></li>
<li><a href="#">新建短篇文章</a></li>
<li><a href="#">我的短篇文章</a></li>
</ul>
</li>
<li><a href="#">网站管理</a></li>
</ul>
</div>

CSS样式如下：

*{margin: 0px; padding: 0px;}
body{
color:#333333; background: transparent;
text-align: center;
font: 12px/120% 宋体,Verdana,Arial,sans-serif;
}
a{
color: #2f468f; text-decoration: none;
background-color: transparent;
}
a:hover{color: #ff6600;}
ul{list-style: none; clear: both; text-align: left;}
li{line-height: 150%;}
.m_menu{
width:960px; margin:20px auto 0px auto; height:32px;
background:url(images/nav.jpg) no-repeat left bottom;
}
#jieqi_menu{line-height: 32px; list-style-type: none;}
#jieqi_menu a{display: block; width: 60px; text-align: center;}
#jieqi_menu a:link{color: #ffffff; text-decoration: none;}
#jieqi_menu a:visited{color: #ffffff; text-decoration: none;}
#jieqi_menu a:hover{color: #fff; text-decoration: none;}
#jieqi_menu li{float: left; width: 60px; line-height:32px;}
#jieqi_menu li a:hover{background:url(images/nav2.jpg) no-repeat left bottom; height:32px; top:-1px; left:0; bottom:-1px;}
#jieqi_menu li ul{
line-height: 20px; list-style: none; text-align: left;
display: none; width:80px; position: absolute;
border-left:solid 1px #FF812A;
border-right:solid 1px #FF812A;
border-bottom:solid 1px #FF812A;
z-index:9999;
}
#jieqi_menu li ul li{
float: left; width: 80px; background: #FEE1A5;}
#jieqi_menu li ul a{display: block; width: 80px !important; text-align:center;}
#jieqi_menu li ul a:link{color:#AE5500; text-decoration:none;}
#jieqi_menu li ul a:visited{color:#AE5500; text-decoration:none;}
#jieqi_menu li ul a:hover{
color:#FFFFFF; text-decoration:none;
font-weight:normal; background:#FA971F;
}
#jieqi_menu li:hover ul{display: block;}
#jieqi_menu li.sfhover ul{display: block;}
#jieqi_menu li.nohover ul{display: hide;}

js如下：

function menufix() {
var sfEls=document.getElementById("jieqi_menu");
if(sfEls) sfEls=sfEls.getElementsByTagName("li");
if(sfEls){
for(var i=0; i<sfEls.length; i++){
sfEls[i].onmouseover=function(){ this.className="sfhover"; }
sfEls[i].onmouseout=function(){ this.className="nohover"; }
sfEls[i].onmousedown=function(){ this.className="sfhover"; }
sfEls[i].onmouseup=function(){ this.className="sfhover"; }
}
}
}
if (document.all){
window.attachEvent('onload',menufix);
}else{
window.addEventListener('load',menufix,false);
}