使用HTML和CSS制作下拉菜单的方法如下：
1、编写带有div导航的html代码：
2、使用class=“nav”属性的‘div’标签作为菜单的容器。在截图中，在图示的HTML代码中，一个简单的无序列表（ul）来表示主菜单项。
3、在主菜单区域中添加链接。在本步骤中，在无序列表（ul）每一项上添加链接。
4、在“关于我们（About Us）”下方LI标签内添加一个无序列表，它代表其子菜单的链接。
5、制作导航css：
是这样的效果吧？！
这是具体的代码，用纯CSS写的，希望能帮助到你！
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>底部菜单上d且固定</title>
<style>
*{ margin:0padding:0}
body{ margin:0padding:0background:#f3f3f3}
#slcd{ width:100%height:60pxbackground:#09Cposition:fixedbottom:0px}
#slcd ul,#slcd ul li{ height:60px}
#slcd ul li{ width:24.9%float:leftlist-style-type:noneline-height:60pxtext-align:centeroverflow:hidden}
#slcd ul li:hover{ background:#09Foverflow:visible}
#zcd ul,#zcd ul li{ width:100%height:60pxbackground:#09C}
.zcd1{ margin-top:-240pxwidth:100%}/*每个子菜单的上边距需要手动调整*/
.zcd2{ margin-top:-300pxwidth:100%}
.zcd3{ margin-top:-300pxwidth:100%}
.zcd4{ margin-top:-120pxwidth:100%}
</style>
</head>
<body>
<div id="slcd">
<ul>
<li>菜单1
<div id="zcd" class="zcd1">
<ul>
<li><a href="#">菜单1子菜单1</a></li>
<li><a href="#">菜单1子菜单2</a></li>
<li><a href="#">菜单1子菜单3</a></li>
</ul>
</div>
</li>
<li style="border-left:2px solid #CCCborder-right:2px solid #CCC">菜单2
<div id="zcd" class="zcd2">
<ul>
<li><a href="#">菜单2子菜单1</a></li>
<li><a href="#">菜单2子菜单2</a></li>
<li><a href="#">菜单2子菜单3</a></li>
<li><a href="#">菜单2子菜单4</a></li>
</ul>
</div>
</li>
<li style="border-right:2px solid #CCC">菜单3
<div id="zcd" class="zcd3">
<ul>
<li><a href="#">菜单3子菜单1</a></li>
<li><a href="#">菜单3子菜单2</a></li>
<li><a href="#">菜单3子菜单3</a></li>
<li><a href="#">菜单3子菜单4</a></li>
</ul>
</div>
</li>
<li>菜单4
<div id="zcd" class="zcd4">
<ul>
<li><a href="#">菜单4子菜单1</a></li>
</ul>
</div>
</li>
</ul>
</div>
<div style="width:1080pxheight:2000pxbackground:#c1c1c1margin:0 autofont-size:200px"><p>希望能帮助到你</p></div>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）