能用纯css实现导航按钮hover时滑动下拉出菜单吗
展开全部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{padding:0; margin: 0; font-size: 12px;}
ul,li{list-style: none;}
li{float: left; width: 100px; border: #eee 1px solid; line-height: 40px; text-align: center; position: relative;}
div{position: relative; width: 407px; height: 200px; background: red; top: 1px; display: none;}
li:hover div{display: block;}
</style>
</head>
<body>
<ul>
<li>1111
<div>aaaa</div>
</li>
<li>2222
<div>bbbb</div>
</li>
<li>3333
<div>cccc</div>
</li>
<li>4444
<div>dddd</div>
</li>
</ul>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{padding:0; margin: 0; font-size: 12px;}
ul,li{list-style: none;}
li{float: left; width: 100px; border: #eee 1px solid; line-height: 40px; text-align: center; position: relative;}
div{position: relative; width: 407px; height: 200px; background: red; top: 1px; display: none;}
li:hover div{display: block;}
</style>
</head>
<body>
<ul>
<li>1111
<div>aaaa</div>
</li>
<li>2222
<div>bbbb</div>
</li>
<li>3333
<div>cccc</div>
</li>
<li>4444
<div>dddd</div>
</li>
</ul>
</body>
</html>
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
纯 CSS 无法实现
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
