如何製作CSS水平導航菜單？

Question

我需要根據下面的樣式的CSS導航：

所需的外觀

下面是我做的設計： -

1）圖表A - 使用精靈製造

注：忽略菜單項

優點的安排：運作良好，並具有所需的外觀

缺點：如果有必要添加另一個菜單項，另必須手動爲該特定菜單項目製作圖像。即。不可擴展

2）附件B

優點：非常可擴展的。如果必須添加另一個菜單項目，則不需要創建新的額外圖像。只有菜單名稱需要在html代碼中輸入。

缺點：懸停效果與期望的外觀不一樣。

我的要求

就是用附錄B，與懸停效果沿附錄A，但，而無需創建一個菜單項時添加額外的圖像（這是什麼發生在附件A，雖然它具有所需的懸停效果）。

我的方法：

1. 開始附件B
2. 工作對於一個菜單項使用的情況下懸停效果3個圖像

一）最左邊的邊緣

b）重複切片的中間a REA

C）最右側邊緣

這是正確的嗎？

這可能嗎？

有沒有更好的方法？一個tute的鏈接會很好。

感謝

---

1]圖表的CSS代碼圖表B A

@charset "UTF-8"; 
* { 
margin:0; 
padding:0; 
list-style: none; 
} 

ul { 
list-style: none; 
margin: 0; 
padding: 0; 
} 

img { 
    border: none; 
} 

.clear { 
clear:both; 
} 

.nav-container { 
width: 960px; 
} 
#navMenu{ 
display: inline; 
margin: 0; 
padding: 0px; 
position: relative; 
z-index: 5; 
} 
#navMenu li{ 
float: left; 
display: inline; 
} 

#navMenu li.navRepeat{ 
float: left; 
display: inline; 
background-image:url("../images/navigation_repeat.gif"); 
width:425px; 
height:40px; 
} 

#navMenu li.navRepeatEnd{ 
float: right; 
display: inline; 
background-image:url("../images/navigation_repeat_end.gif"); 
width:1px; 
height:40px; 
} 

a.navReservations{ 
display:block; 
float:left; 
width:89px; 
height:40px; 
background-repeat:no-repeat; 
background: url("../images/reservations.gif") 
} 

a.navReservations:hover{ 
background: url("../images/reservations.gif") 0 40px; 
} 

a.navRentals{ 
display:block; 
float:left; 
width:62px; 
height:40px; 
background-repeat:no-repeat; 
background: url("../images/rentals.gif") 
} 

a .navReservations { 
float: left; 
display: inline; 
height: 100px; 
width: 400px; 
} 

a.navRentals:hover{ 
background: url("../images/rentals.gif") 0 40px; 
} 

a.navTariffs{ 
display:block; 
float:left; 
width:59px; 
height:40px; 
background-repeat:no-repeat; 
background: url("../images/tariffs.gif") 
} 

a.navTariffs:hover{ 
background: url("../images/tariffs.gif") 0 40px; 
} 

a.navFleet{ 
display:block; 
float:left; 
width:64px; 
height:40px; 
background-repeat:no-repeat; 
background: url("../images/fleet.gif") 
} 

a.navFleet:hover{ 
background: url("../images/fleet.gif") 0 40px; 
} 

a.navTools{ 
display:block; 
float:left; 
width:56px; 
height:40px; 
background-repeat:no-repeat; 
background: url("../images/tools.gif") 
} 

a.navTools:hover{ 
background: url("../images/tools.gif") 0 40px; 
} 

a.navReports{ 
display:block; 
float:left; 
width:71px; 
height:40px; 
background-repeat:no-repeat; 
background: url("../images/reports.gif") 
} 

a.navReports:hover{ 
background: url("../images/reports.gif") 0 40px; 
} 

a.navSystem-Management{ 
display:block; 
float:left; 
width:133px; 
height:40px; 
background-repeat:no-repeat; 
background: url("../images/system_management.gif") 
} 

a.navSystem-Management:hover{ 
    background: url("../images/system_management.gif") 0 40px; 
} 

2] CSS代碼

#navigation { 
width: 959px; 
height: 36px; 
margin: 0; 
padding: 0; 
background-image: url(images/navigation-bg.gif); 
background-repeat: no-repeat; 
background-position: left top; 
border: 1px solid #CCC; 
} 
#navigation ul { 
list-style: none; 
margin: 0; 
padding: 0; 
} 
#navigation ul li { 
display: inline; 
margin: 0px; 
} 
#navigation ul li a { 
height:27px; 
display: block; 
float: left; 
color: #000; 
text-decoration: none; 
font-family: Arial; 
font-size: 12px; 
font-weight: bold; 
background-image: url(images/navigation-separator.gif); 
background-repeat: no-repeat; 
background-position: right center; 
padding-top: 6px; 
padding-right: 15px; 
padding-left: 15px; 
vertical-align: 10%; 
padding-bottom: 4px; 
} 

#navigation ul li a:hover { 
color:#FFF; 
background-image: url(images/navigation-hover.gif); 
background-repeat: repeat-x; 
background-position: left top; 
} 

#navigation ul li#active a { 
color:#363636; 
background: url(images/navigation-hover.png) repeat-x left top; 
} 

Answer 1

嗯，你在技術上只需要兩個精靈，廣泛的左腳t +標籤的正文和右側。廣泛地說，我的意思是說，400px或一些任意大小的，你不會預料到的。您的交易易於使用。

<ul class="list"> 
    <li><a href="#">Text</a></li> 
</ul> 

用CSS一樣：您可以通過具有類似於標記完成這個

ul.list 
{ 
    list-style-type: none; 
    margin: 0; 
} 
ul.list li 
{ 
    float: left; 
    background: url(leftpluswide.png) top left no-repeat; 
} 
ul.list li a 
{ 
    background: url(right.png) top right no-repeat; 
} 

唯一需要注意的是，由於right.png會重疊在李的背景下，你需要以確保它沒有任何透明度。

爲了完整起見，您可能需要對li和a應用高度（可能需要display：inline-block或line-height才能使用它），以使所有內容一致。