原文链接：http://www.cnblogs.com/acaciasun/p/3343618.html

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

 

转载于:https://www.cnblogs.com/acaciasun/p/3343618.html