<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/*隐藏下拉列表*/
.list{
display: none
}
/*鼠标移动显示下拉列表*/
.menu:hover .list{
display: block
}
</style>
</head>
<body>
<div class="menu">
<a href="#">下拉菜单</a>
<div class="list">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</div>
</body>
</html>
1，一般下拉菜单的二级菜单都是绝对定位的，绝对定位的元素脱离了常规流，所以不占位，他们会叠加在其他元素的上面或者下面2，你可以把这里面的空格当作［内］，也就是子孙元素的意思
#menu ul li ---- #menu 内的 ul 内的 li
#menu ul li:first-child a:hover:after ---- #menu 内的 ul 内的 li(并且是ul的第一个子元素) 内的 a 鼠标指向时 after
after/before 的意义在于，他们不存在在html文档中，但是又能被浏览器显示出来，因此，可以用来实现一些效果。
常用的例如：
～文字前面的icon，不用在html中插入多余的空元素，直接使用after或者before，前面后面随便插.......
～清除浮动
～为引用的文字加入引号
～画一些有意思的图标
原理hover，二级先设置样式是display:none，当一级的元素处于:hover鼠标移上的时候，二级的元素就display:block，二级就会显示出来了。<li>一级
<ul>
<li>二级1</li>
<li>二级2</li>
<li>二级3</li>
</ul>
</li>
css
li{padding:0margin:0list-style:none}
li ul{display:none}
li:hover ul{display:block}
大概是这样，更齐全的代码，你问度娘要：CSS下拉菜单，可以找到纯CSS的或者JS,JQ的，
