如何用CSS制作縱向導航菜單？_Div+CSS教程

教程Tag：暫無Tag,歡迎添加,賺取U幣!

　　
　　應用Web標準進行網頁制作以后，我們通常用ul無序列表標簽來構建菜單。我們以前討論過很多橫向菜單的制作，在前面的文章中，我們講述了《用“ul li”及css制作韓國風格菜單》，是一種縱向的導航菜單。我們今天來看另一種縱向導航菜單，我們不斷的總結經驗、提高編碼水平，才能在實際操作中更加的得心應手。

　　我們看下面的XHTML代碼：

示例代碼 [www.ghpqjb.com]

<ul><span>www.ghpqjb.com</span>
<li><a href="http://www.ghpqjb.com" target="_blank">Div CSS教程</a></li>
<li><a href="http://www.ghpqjb.com" target="_blank">CSS布局實例</a></li>
<li><a href="http://www.ghpqjb.com" target="_blank">CSS在線手冊</a></li>
</ul>
<ul><span>www.ghpqjb.com</span>
<li><a href="http://www.ghpqjb.com" target="_blank">Div CSS教程</a></li>
<li><a href="http://www.ghpqjb.com" target="_blank">CSS布局實例</a></li>
<li><a href="http://www.ghpqjb.com" target="_blank">CSS在線手冊</a></li>
</ul>

　　這是兩個無序列表，每一個列表中有三個列表項，即是導航菜單的內容。
　　我們用CSS對此進行樣式的定義，讓它按我們的要求顯示出來，我們看下面的CSS代碼：

示例代碼 [www.ghpqjb.com]

*{ padding:0; margin:0; font-size:12px; line-height:1.7;
font-family:Verdana, "宋體", Arial; list-style:none;}
a:link,a:visited{background:#D3DFFA; padding-left:23px; color:#036;text-decoration: none;}
a:hover,a:active{color:#000;background-color: #ADC2F5;}
a{display:block;border-bottom:1px solid #fff; padding-left:10px; width:127px; }
ul{ background:#fff; width:150px; border:1px solid #06f;
margin:0px 20px -1px 20px; padding:1px;}
span{ display:block;background:#036; padding-left:13px; color:#fff; }

　　首先我們進行了全局定義；然后定義了鏈接了樣式，請注重我們對a的定義，是設為塊元素，并設置了下邊框線以及寬度等。接著我們定義了無序列表UL的樣式，請注重ul的定位以及內邊距。最后我們定義了ul中span的樣式。整個設置完成。

　　我們來看看下面的縱向導航菜單效果：

代碼調試框 [www.ghpqjb.com]

<!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>www.ghpqjb.com</title>
<style>
*{ padding:0; margin:0; font-size:12px; line-height:1.7; font-family:Verdana, "宋體", Arial; list-style:none;}
a:link,a:visited{background:#D3DFFA; padding-left:23px; color:#036;text-decoration: none;}
a:hover,a:active{color:#000;background-color: #ADC2F5;}
a{display:block;border-bottom:1px solid #fff; padding-left:10px; width:127px; }
ul{ background:#fff; width:150px; border:1px solid #06f; margin:0px 20px -1px 20px; padding:1px;}
span{ display:block;background:#036; padding-left:13px; color:#fff; }
</style>
</head>
<body>
<ul><span>www.ghpqjb.com</span>
<li><a href="http://www.ghpqjb.com" _fcksavedurl="http://www.ghpqjb.com" target="_blank">Div CSS教程</li>
<li><a href="http://www.ghpqjb.com" _fcksavedurl="http://www.ghpqjb.com" target="_blank">CSS布局實例</li>
<li><a href="http://www.ghpqjb.com" _fcksavedurl="http://www.ghpqjb.com" target="_blank">CSS在線手冊</li>
</ul>
<ul><span>www.ghpqjb.com</span>
<li><a href="http://www.ghpqjb.com" _fcksavedurl="http://www.ghpqjb.com" target="_blank">Div CSS教程</li>
<li><a href="http://www.ghpqjb.com" _fcksavedurl="http://www.ghpqjb.com" target="_blank">CSS布局實例</li>
<li><a href="http://www.ghpqjb.com" _fcksavedurl="http://www.ghpqjb.com" target="_blank">CSS在線手冊</li>
</ul>
</body>
</html>

[ 可先修改部分代碼再運行查看效果 ]

　　大家可以試著修改上面的代碼并運行查看效果，不斷的試驗與思考才會進步的更快。：）
　　