![](https://iknow-base.cdn.bcebos.com/lxb/notice.png)
如何用css做下拉菜单
2017-03-06 · 百度认证:深圳联雅网络科技有限公司
![](https://cambrian-images.cdn.bcebos.com/d3e2977aa73df8176b3b7e45818c6ecd_1533535531004.jpeg)
联雅网络成立于2005年,是一家技术开发型的网络公司,致力于高端品牌网站建设,微信公众平台开发,是一支拥有一百多人的网站设计技术团队。分深圳联雅网络与广州联雅网络,一直专注网站建设领域
向TA提问
关注
![](https://wyw-base.cdn.bcebos.com/pc-content/follow.gif)
展开全部
纯CSS的下拉菜单,此处理解的意思就是<li>标签套<li>标签,然后再给<li>标签设置样式。在被套的<li>标签设置平时状态为隐藏,再等鼠标移动到上一个<li>标签时,将被套的<li>标签显示(样式:overflow:hidden; )。
贴一段网上摘的纯CSS下拉菜单(二级)
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>利用float制作兼容ie6纯css下来菜单</title>
<style type="text/css">
* { margin:0; padding:0; }
ul { list-style:none; }
a:hover {color:#555; }
.nav { float:left; overflow:hidden; text-align:center; font-size:14px; }
.nav dd { float:left; width:300px; margin:-888px -150px 0 0; }
.nav dd a { float:left; margin-top:888px; display:block; position:relative; background:#eee; width:150px; height:30px; line-height:30px; border-bottom:1px solid #fff; }
.nav a:hover { margin-right:1px; background:#3cf; }
.nav dd ul { float:left; font-size:0; z-index:888; }
.nav dd li a { clear:left; width:150px; margin-top:0; font-size:14px; }
.nav dd li a:hover { margin-right:1px; }
</style>
</head>
<body>
<dl class="nav">
<dd><a href="">首页</a></dd>
<dd>
<a href="">关于我们</a>
<ul>
<li><a href="">公司简介</a></li>
<li><a href="">公司文化</a></li>
<li><a href="">企业荣誉</a></li>
<li><a href="">联系我们</a></li>
</ul>
</dd>
<dd>
<a href="">新闻动态</a>
<ul>
<li><a href="">国内新闻</a></li>
<li><a href="">国外新闻</a></li>
</ul>
</dd>
<dd>
<a href="">产品展示</a>
<ul>
<li><a href="">111</a></li>
<li><a href="">222</a></li>
</ul>
</dd>
</dl>
</body>
</html>
贴一段网上摘的纯CSS下拉菜单(二级)
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>利用float制作兼容ie6纯css下来菜单</title>
<style type="text/css">
* { margin:0; padding:0; }
ul { list-style:none; }
a:hover {color:#555; }
.nav { float:left; overflow:hidden; text-align:center; font-size:14px; }
.nav dd { float:left; width:300px; margin:-888px -150px 0 0; }
.nav dd a { float:left; margin-top:888px; display:block; position:relative; background:#eee; width:150px; height:30px; line-height:30px; border-bottom:1px solid #fff; }
.nav a:hover { margin-right:1px; background:#3cf; }
.nav dd ul { float:left; font-size:0; z-index:888; }
.nav dd li a { clear:left; width:150px; margin-top:0; font-size:14px; }
.nav dd li a:hover { margin-right:1px; }
</style>
</head>
<body>
<dl class="nav">
<dd><a href="">首页</a></dd>
<dd>
<a href="">关于我们</a>
<ul>
<li><a href="">公司简介</a></li>
<li><a href="">公司文化</a></li>
<li><a href="">企业荣誉</a></li>
<li><a href="">联系我们</a></li>
</ul>
</dd>
<dd>
<a href="">新闻动态</a>
<ul>
<li><a href="">国内新闻</a></li>
<li><a href="">国外新闻</a></li>
</ul>
</dd>
<dd>
<a href="">产品展示</a>
<ul>
<li><a href="">111</a></li>
<li><a href="">222</a></li>
</ul>
</dd>
</dl>
</body>
</html>
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询