如何用css做下拉菜单
2017-03-06 · 百度认证:深圳联雅网络科技有限公司
联雅网络
联雅网络成立于2005年，是一家技术开发型的网络公司，致力于高端品牌网站建设，微信公众平台开发，是一支拥有一百多人的网站设计技术团队。分深圳联雅网络与广州联雅网络，一直专注网站建设领域
向TA提问
关注
![]()
展开全部
纯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>
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
