虎扑首页html制作,仿虎扑首页四级导航

摘要：    首先用html和css将此四级下拉菜单的布局分布好，多次使用‘ul’、‘li’标签，并逐层嵌，一共有四层导航条，之后再添加jQuery代码部分，首先隐藏二级、三级以及四级下拉菜单，之后当鼠标移动到包含二级菜单的一级菜单时显示当前二级菜单，并设置与之对应的当鼠标移出包含二级菜单的一级菜单时隐藏当前二级菜单，之后三级菜单和四级菜单都做出类似的功能即可。完

首先用html和css将此四级下拉菜单的布局分布好，多次使用‘ul’、‘li’标签，并逐层嵌，一共有四层导航条，之后再添加jQuery代码部分，首先隐藏二级、三级以及四级下拉菜单，之后当鼠标移动到包含二级菜单的一级菜单时显示当前二级菜单，并设置与之对应的当鼠标移出包含二级菜单的一级菜单时隐藏当前二级菜单，之后三级菜单和四级菜单都做出类似的功能即可。

完整代码如下：html>

四级下拉导航

*{margin: 0px;padding: 0px;}

.menu { width: 800px;height: 35px;margin: 0px auto;background:#A41F24; margin-top: 20px;color: #fff; border:1px solid #ccc;border-radius: 5px; }

ul{ list-style: none;}

ul li {width: 100px;height: 35px;line-height: 35px;text-align: center;float: left;border-right: 1px solid #ccc;cursor: pointer;}

.twobox li {width: 100px;height: 30px;line-height: 30px;background: