HTML
<div id='nav'>
<div class='welcome'>欢迎您:xxx <a href='#'>[退出登录]</a></div>
<ul class='menu'>
<li><a href='#'>样式雷图档</a></li>
<li>
<a href='#'>样式雷世家相关文献
<table><tr><td>
<ul>
<li><a href='#'>雷氏族谱</a></li>
<li><a href='#'>雷氏祖茔碑拓片</a></li>
<li><a href='#'>雷氏祖先画像</a></li>
</ul>
</table></tr></td>
</a>
</li>
<li><a href='#'>工程籍本</a></li>
<li><a href='#'>档案文献</a></li>
<li><a href='#'>测绘图</a></li>
<li>
<a href='#'>研究成果
<table><tr><td>
<ul>
<li><a href='#'>学位论文</a></li>
<li><a href='#'>期刊论文</a></li>
<li><a href='#'>专著</a></li>
<li><a href='#'>析出文献</a></li>
</ul>
</table></tr></td>
</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='#'>任务菜单
<table><tr><td>
<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>
</ul>
</table></tr></td>
</a>
</li>
</ul>
</div>
CSS
*{
margin:0;
padding:0;
}
#nav{
width:200px;
float:left;
}
#nav .welcome{
width:100%;
margin:10px 0 30px 0;
}
#nav a{
text-decoration:none;
color:#000000;
white-space:nowrap;
}
#nav a:hover{
color:red;
}
#nav ul{
list-style-type:none;
}
#nav ul.menu{
overflow:auto;
}
#nav ul a{
display:block;
border:1px solid #cccccc;
float:left;/*防止菜单项换行*/
clear:left;
width:190px;
line-height:30px;
margin-bottom:2px;
padding-left:5px;
}
#nav ul a a{
width:180px;
float:right;
clear:right;
}
#nav table{
border-collapse: collapse;
}
#nav ul a:hover{
font-weight:bold;
background-color:#ffffff;
}
#nav ul a ul{
display:none;
width:190px;
}
#nav ul a:hover ul,#nav ul li:hover ul{
display:block;
}
需注意的地方:
1、在IE6中,好像仅a标签支持hover伪类
2、将ul li组织的二级菜单放在a标签里,需要设置a标签的属性:display:block;,因为inline元素里不能嵌套block元素
3、做了2中的设置之后,FF中布局都不正常,IE个版本中鼠标悬停在一级菜单的a标签上,二级菜单也不显示,搜到这个解释“if nothing happens to the <a> element on hover, usually nothing will happen on hover on any child elements either. A colour or background colour change is usually all that is required.”并参考这篇文章http://www.cnblogs.com/rubylouvre/archive/2009/09/28/1575294.html,在ul li组织的二级菜单外面在加一层表格,二级菜单可以显示了
4、在2中设置a标签的属性:display:block;又引出了一个BUG:每个a标签包的菜单项后面都自动换行了。参考这篇文章解决http://www.elingxi.com/a/css/091E32010.html