float: none;沒有用。怎么回事？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS下拉菜單</title>
<style type="text/css">
? ? *{margin: 0px;padding:0px;}
#nav{width: 600px;height: 40px;background-color: #ccc;margin: 0 auto;}
#nav ul{list-style: none;}
#nav ul li{line-height: 40px;text-align: center;position: relative;float: left;}
#nav a{text-decoration: none;display: block;padding:0 40px;}
#nav a:hover{background-color: ?#000;color: #fff;}
#nav ul li ul li{float: none;background-color: #eee;margin-top: 2px;color: #fff;}
</head>
<body>
<div id="nav">
? ? ? ? ? ?<ul>
? ? ? ? ? ? ? ? <li><a href="#">首頁</a></li>
? ? ? ? ? ? ? ? <li><a href="#">官網</a></li>
? ? ? ? ? ? ? ? <ul>
? <li>官網</li>
? <li>官網</li>
? <li>官網</li>
? <li>官網</li>
? ? ? ? ? ? </ul>
? ? ? ? ? ? ? ? <li><a href="#">美食</a></li>
? ? ? ? ? ? ? ? <li><a href="#">靚仔</a></li>
? ? ? ? ? ? ? ? <li><a href="#">靚仔</a></li>
? ? ? ? ? ?</ul>
</div>
</body>
</html>
2018-12-06
用display隱藏與顯示
?ul li ul{width:90px; position:absolute; display:none }
?ul li:hover ul{display:block;}