首先写HTML文件,写你想要制作的导航栏,例如:
<html> <head> <title>二级导航栏</title> </head> <body> <div class="sty"> <ul> <li><a href="#">网站首页</a></li> <li><a href="#">慢生活</a> <ul> <li><a href="#">旅行</a></li> <li><a href="#">美食</a></li> <li><a href="#">阅读</a></li> </ul> </li> <li><a href="#">web前端</a> <ul> <li><a href="#">html5</a></li> <li><a href="#">css</a></li> <li><a href="#">JavaScript</a></li> </ul> </li> <li><a href="#">网络营销</a></li> <li><a href="#">新闻资讯</a></li> </ul> </div> </body> </html>
在一级标签写嵌套二级标签即可,这样写好一个二级导航栏基本确定,只需要加样式就好啦
然后写css文件,设定样式
*{ margin: 0; padding: 0; } /*CSS全局设置*/ *{ margin:0; padding:0; } .nav{ background-color:#4a4a4a; height:40px; width:450px; margin:0 auto; } /*横向一级菜单样式设置*/ ul{ list-style:none; } ul li{ float:left; line-height:40px; text-align:center; position:relative; } a{ text-decoration:none; color:white; display:block;/*将a行内元素转变成块级元素*/ width:90px; height:40px; } a:hover{ background-color:#666666; color:#FFFFFF; } /*二级下拉菜单样式设置*/ ul li ul{ position:absolute; top:40px; left:0px; display:none;/*默认状态下或鼠标离开时隐藏*/ width:90px; } ul li ul li{ float:none; background-color:#EEEEEE; } ul li ul li a:link,ul li ul li a:visited{ background-color:#4a4a4a; } ul li ul li a:hover{ background-color:#009933; } /*鼠标滑过一级菜单的元素时显示下拉菜单*/ ul li:hover ul{ display:block; }
效果图如下: