<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>
亲，你好，很乐意为你解答问题，目前并不是所有手机浏览器都支持HTML5+CSS3的功能所以并不是你使用了CSS3的制作方法，所有手机就会识别你的制作方法。
首先你要确认你的网站为了哪一部分的手机用户提供服务，
如果有问题，可以继续追问我。
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，前面后面随便插.......
～清除浮动
～为引用的文字加入引号
～画一些有意思的图标
