效果：
Code
*{margin: 0; padding: 0;}
body{font-size:12px;}
h2{font-size:14px;height:20px;line-height:20px;padding-left:25px;margin:3px 0;}
ul.cplb { margin:0 5px; padding: 0; list-style: none; width:700px;}
ul.cplb li { height:20px;line-height:20px; position: relative; float:left; display:block; width:60px; }
li ul.nav_lb { position: absolute; left: 0; top: 20px; display: none; width:60px;background:#f6f6f6;border: 1px solid #ccc;list-style:none; }
/* Styles for Menu Items */
ul.cplb li a { display: block; text-decoration: none; color: #000; background: #fff; /*
IE6 Bug */ }
/* Fix IE. Hide from IE Mac \*/
/* End */
ul.cplb li a:hover { color:#0d65c7; text-decoration:underline; } /* Hover Styles */
.cplb li ul.nav_lb li a { display:block;padding: 0px 5px; background:#f6f6f6; } /* Sub Menu
Styles */
.cplb li:hover ul{ display: block; } /* The magic */
</style>
</head>
<body>
<h2>装修设计</h2>
<ul id="nav" class="cplb">
<li><a href="#">·瓷砖</a>
<ul class="nav_lb">
<li><a href="#" target="_blank">壁砖</a> </li>
<li><a href="#" target="_blank">地砖</a> </li>
<li><a href="#" target="_blank">马赛克</a> </li>
</ul>
</li>
<li><a href="#">·洁具</a>
<ul class="nav_lb">
<li><a href="#" target="_blank">马桶</a> </li>
<li><a href="#" target="_blank">浴缸</a> </li>
</ul>
</li>
<li><a href="#">·地板</a>
<ul class="nav_lb">
<li><a href="#" target="_blank">壁砖hyhy</a> </li>
<li><a href="#" target="_blank">地砖hyyu</a> </li>
<li><a href="#" target="_blank">马赛克frfrr</a> </li>
</ul>
</li>
<li><a href="#">·橱柜</a>
<ul class="nav_lb">
<li><a href="#" target="_blank">壁砖e4354</a> </li>
<li><a href="#" target="_blank">地砖5355</a> </li>
<li><a href="#" target="_blank">马赛克5454</a> </li>
</ul>
</li>
<li><a href="#">·门窗</a></li>
<li><a href="#">·板式家具</a></li>
</ul>
</body>
</html>