A. html頁面怎麼實現二級下拉菜單
現在我們為nav添加樣式,首先去掉默認的margin和padding，再去掉<ul>< li>標簽的list-style樣式和<a>標簽的默認下劃線。接下來再添加適當的樣式（根據實際需要添加）進行美化，如一下樣式：
<style type="text/css">
* { margin:0; padding:0;}
ul, li { list-style:none;}
a { text-decoration:none;}
.nav { border:2px solid #ccc; border-right:none; overflow:hidden; float:left; margin:100px 0 0 300px;}
.nav ul li { float:left;}
.nav ul li a { width:120px; height:40px; text-align:center; line-height:40px; display:block; border-right:2px solid #ccc; background:#eee; color:#666;}
.nav ul li a:hover{ color:#f00; }
</style>
打開頁面預覽效果
B. 找個html二級省市聯動下拉菜單代碼，不要資料庫的，越簡單越好。。
純css打造的下拉菜單效果，兼容多瀏覽器，將以下代碼復制，創建一個html文檔即可預覽，希望對你有所幫助，代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title> CSS下拉菜單 </title>
<style type="text/css">
*{margin:0;padding:0;}
#menu{font-size:12px;position:relative;z-index:100;}
#menu ul{list-style:none;}
#menu li {float:left;position:relative;}
#menu ul ul {visibility:hidden;position:absolute;left:3px;top:23px;}
#menu table {position:absolute; top:0; left:0;}
#menu ul li:hover ul,
#menu ul a:hover ul{visibility:visible;}
#menu a{display:block;border:1px solid #000;background:#8192A6;padding:2px 10px;margin:3px;color:#fff;text-decoration:none;}
#menu a:hover{background: #0FF;color:#f00;border:1px solid #00F;}
#menu ul ul{}
#menu ul ul li {clear:both;text-align:left;font-size:12px;}
#menu ul ul li a{display:block;width:100px;height:13px;margin:0;border:0;border-bottom:1px solid red;}
#menu ul ul li a:hover{border:0;background:#f2cdb0;border-bottom:1px solid #00F;}
</style>
</head>
<body>
<a href="#">站長特效網</a>
<hr>
<div id="menu">
<ul>
<li><a href="#">
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">一號站長特效</a></li>
<li><a href="#">二號站長特效</a></li>
<li><a href="#">三號站長特效</a></li>
<li><a href="#">四號站長特效</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">站長特效二號
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">站長一號特效</a></li>
<li><a href="#">站長二號特效</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">站長特效三號
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">站長一號特效</a></li>
<li><a href="#">站長一號特效</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">站長特效四號</a></li>
<li><a href="#">站長特效五號</a></li>
</ul>
</div>
</body>
</html>
C. html二級菜單怎麼做
首頁我們打看dreamweaver或其它編輯器，創建一個名為nav的導航菜單
<div class="nav">
<ul>
<li><a href="#">欄目一</a></li>
<li><a href="#">欄目二</a></li>
<li><a href="#">欄目三</a></li>
<li><a href="#">欄目四</a></li>
<li><a href="#">欄目五</a></li>
</ul>
</div>
如下圖所示：
2
現在我們為nav添加樣式,首先去掉默認的margin和padding，再去掉<ul>< li>標簽的list-style樣式和<a>標簽的默認下劃線。接下來再添加適當的樣式（根據實際需要添加）進行美化，如一下樣式：
<style type="text/css">
* { margin:0; padding:0;}
ul, li { list-style:none;}
a { text-decoration:none;}
.nav { border:2px solid #ccc; border-right:none; overflow:hidden; float:left; margin:100px 0 0 300px;}
.nav ul li { float:left;}
.nav ul li a { width:120px; height:40px; text-align:center; line-height:40px; display:block; border-right:2px solid #ccc; background:#eee; color:#666;}
.nav ul li a:hover{ color:#f00; }
</style>
打開頁面預覽效果
3
像這樣，一個菜單橫向菜單就建好了，下來我們給欄目一，欄目二，欄目三，添加二級下拉菜單
<div class="nav">
<ul>
<li><a href="#">欄目一</a>
<ul>
<li><a href="#">二級欄目</a></li>
<li><a href="#">二級欄目</a></li>
<li><a href="#">二級欄目</a></li>
<li><a href="#">二級欄目</a></li>
</ul>
</li>
<li><a href="#">欄目二</a>
<ul>
<li><a href="#">二級欄目</a></li>
<li><a href="#">二級欄目</a></li>
<li><a href="#">二級欄目</a></li>
<li><a href="#">二級欄目</a></li>
</ul>
</li>
<li><a href="#">欄目三</a>
<ul>
<li><a href="#">二級欄目</a></li>
<li><a href="#">二級欄目</a></li>
<li><a href="#">二級欄目</a></li>
<li><a href="#">二級欄目</a></li>
<li><a href="#">二級欄目</a></li>
</ul>
</li>
<li><a href="#">欄目四</a></li>
<li><a href="#">欄目五</a></li>
</ul>
</div>
4
添加完二級欄目後，現在我們開始添加css樣式，首先給<li>標簽下的<ul>標簽添加相對定位，再去除之下<li>標簽的做浮動樣式，再適當修改<a>標簽，如一下樣式：
.nav ul li ul { position:absolute;}
.nav ul li ul li { float:none;}
.nav ul li ul li a { border-right:none; border-top:1px dotted #ccc; background:#f5f5f5;}
我們刷新頁面預覽下效果
5
接下來我們隱藏掉二級下來菜單，並給它添加滑鼠滑動效果，使得當滑鼠滑動到主欄目時，二級下來菜單顯示，樣式如下：
.nav ul li ul { position:absolute; display:none;}
.nav ul li ul li { float:none;}
.nav ul li ul li a { border-right:none; border-top:1px dotted #ccc; background:#f5f5f5;}
.nav ul li:hover ul{ display:block; }
再次預覽效果，如下圖所示：
6
至此，橫向二級下拉菜單就製作完成了，這里附加上全部代碼，以方便各位朋友參考，感謝各位朋友的瀏覽。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>橫排二級下拉菜單</title>
<style type="text/css">
* { margin:0; padding:0;}
ul, li { list-style:none;}
a { text-decoration:none;}
.nav { border:2px solid #ccc; border-right:none; overflow:hidden; float:left; margin:100px 0 0 300px;}
.nav ul li { float:left;}
.nav ul li a { width:120px; height:40px; text-align:center; line-height:40px; display:block; border-right:2px solid #ccc; background:#eee; color:#666;}
.nav ul li a:hover{ color:#f00; }
.nav ul li ul { position:absolute; display:none;}
.nav ul li ul li { float:none;}
.nav ul li ul li a { border-right:none; border-top:1px dotted #ccc; background:#f5f5f5;}
.nav ul li:hover ul{ display:block; }
</style>
</head>
<body>
<div class="nav">
<ul>
<li><a href="#">欄目一</a>
<ul>
<li><a href="#">二級欄目</a></li>
<li><a href="#">二級欄目</a></li>
<li><a href="#">二級欄目</a></li>
<li><a href="#">二級欄目</a></li>
</ul>
</li>
<li><a href="#">欄目二</a>
<ul>
<li><a href="#">二級欄目</a></li>
<li><a href="#">二級欄目</a></li>
<li><a href="#">二級欄目</a></li>
<li><a href="#">二級欄目</a></li>
</ul>
</li>
<li><a href="#">欄目三</a>
<ul>
<li><a href="#">二級欄目</a></li>
<li><a href="#">二級欄目</a></li>
<li><a href="#">二級欄目</a></li>
<li><a href="#">二級欄目</a></li>
<li><a href="#">二級欄目</a></li>
</ul>
</li>
<li><a href="#">欄目四</a></li>
<li><a href="#">欄目五</a></li>
</ul>
</div>
</body>
</html>