能用纯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>