下拉菜单懂得了hover的用法
<!DOCTYPE html>
<html>
<head>
<title>下拉</title>
</head>
<style type="text/css">
*{margin:0;padding:0;}
.fl{float: left;}
li {list-style: none; }
.nav li{float: left; width:40px;}
.m {display: none;}
.nav li ul li { padding:10px 0; }
.nav li:hover .m{display: block;}
</style>
<body>
<ul class="nav">
<li>国内
<ul class="m">
<li><a href="">哈弗</a></li>
<li><a href="">长安</a></li>
</ul>
</li>
<li>国外
<ul class="m">
<li><a href="">大众</a></li>
<li><a href="">现代</a></li>
</ul>
</li>
</ul>
</body>
</html>