下拉清單實作html+css

效果:

<a href="http://s3.51cto.com/wyfs02/M02/84/79/wKioL1eRulPxbffqAAARlhLoTRg817.png-wh_500x0-wm_3-wmp_4-s_496712454.png" target="_blank"></a>

&lt;!DOCTYPE html&gt;

&lt;html&gt;

&lt;head&gt;

&lt;title&gt;&lt;/title&gt;

&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;

&lt;style type="text/css"&gt;

*{margin: 0px;padding: 0px}

.nav{background-color: #eee;width: 600px;height: 40px;margin: 0 auto;}

.nav-ul{list-style: none;}

.nav-ul li{float: left;line-height: 40px;text-align: center;position: relative;}

.nav-ul li a {text-decoration: none;color: #000;display: block;padding:0 10px;}

.nav-ul li a:hover{color: #FFF;background-color: #666}

.nav-ul li .nav-ul-li-ul{position: absolute;left: 0px; top:40px;display: none;}

.nav-ul li .nav-ul-li-ul li {list-style: none; float: none;background-color: #eee;margin-top: 2px;}

.nav-ul li .nav-ul-li-ul li a:hover{color: #FFF;background-color: #36e}

.nav-ul li:hover ul {display: block;}

&lt;/style&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;div class="nav"&gt;

&lt;ul class="nav-ul"&gt;

&lt;li&gt;&lt;a href=""&gt;首頁&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;

&lt;a href=""&gt;圖檔館&lt;/a&gt;

&lt;ul class="nav-ul-li-ul"&gt;

&lt;li&gt;&lt;a href=""&gt;網際網路&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;a href=""&gt;經濟學&lt;/a&gt;&lt;/li&gt;

&lt;/ul&gt;

&lt;/li&gt;

&lt;li&gt;&lt;a href=""&gt;關于我們&lt;/a&gt;&lt;/li&gt;

&lt;/div&gt;

&lt;/body&gt;

&lt;/html&gt;

本文轉自  素顔豬  51CTO部落格，原文連結:http://blog.51cto.com/suyanzhu/1828780