<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>導航欄</title>
<style>
* {margin:0; padding:0; border:0;}
.out {margin:auto; width:400px; height:auto; border:solid 1px black; list-style:none; background:#3C0; margin-top:50px;}
.out > li {float:left; width:100px; height:18px; position:relative;}
.out:after {display:block; content:""; height:0; clear:both;}
.in {width:100px; height:auto; list-style:none; background-color:#60C; border:solid 1px black; position:absolute; left:-1px; top:100%; display:none;}
.out > li:hover .in {display:block;}
div {width:400px; margin:auto;}
</style>
</head>
<body>
<ul class="out">
<li>item1
<ul class="in">
<li>item1.2</li>
<li>item1.2</li>
<li>item1.2</li>
</ul>
</li>
<li>item2
<ul class="in">
<li>item2.2</li>
<li>item2.2</li>
<li>item2.2</li>
</ul>
</li>
<li>item3
<ul class="in">
<li>item3.2</li>
<li>item3.2</li>
<li>item3.2</li>
</ul>
</li>
<li>item4
<ul class="in">
<li>item4.2</li>
<li>item4.2</li>
<li>item4.2</li>
</ul>
</li>
</ul>
</body>
</html>實際顯示效果如下圖
