1、在html中写出一级菜单列表。
2、然后在每个一级菜单中再嵌套一个列表即可让导航的二级导航目录出现在其他元素之上。前端开发是创建Web页面或app等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品。
用CSS控制的下拉菜单，在各个浏览器中表现的不够完美，最佳的方法是使用jQuery来制作，代码如下，加了一个缓动的效果：[HTML部分]
<div id="nav">
<ul>
<li><a href="#">菜单零</a></li>
<li><a href="#">菜单一</a></li>
<ul class="childnav">
<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><a href="#">菜单二</a>
<ul class="childnav">
<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>
<!-- /nav -->
</ul>
</div>
[JS部分]
<script type="text/javascript">
$(document).ready(function(){
$("#nav ul li a").hover(function() {
$(this).parent().find("ul.childnav").slideDown('fast').show()
$(this).parent().hover(function() {
}, function(){
$(this).parent().find("ul.childnav").slideUp('slow')
})
})
})
</script>
[CSS部分]
<style type="text/css">
* { padding:0margin:0list-style:none}
#nav {
margin:200px
}
#nav ul { background:#333padding:5pxfloat:leftwidth:100%}
#nav li {
float:left
padding:0 5px
position:relative
}
#nav li a {
float:left
padding:0 5px
display:block
text-align:center
color:#fff
text-decoration:none
font-size:12px
height:18px
line-height:18px
}
#nav li a:hover, #nav li a.on {
background:#444
text-decoration:none
}
#nav li ul {
display: none
position: absolute
left: -2px
top: 18px
background: #999
border-bottom:3px solid #333
z-index:1000
}
#nav li ul li {
background:none
float:none
padding:0
}
#nav li ul a {
float:none
}
#nav li ul a:hover {
background:#888
}
#nav li:hover ul, #nav li.over ul {
display: block
z-index:999
}
</style>
你这个要求，css也就是做下菜单样式，关键的点击后切换到相应二级菜单部分必须靠js。
百度：js tab 切换，把里面的onmouseover改成onclick就行了。
