如何制作CSS水平导航菜单？

Question

我需要根据以下样式进行CSS导航：

DESIRED LOOK

以下是我所做的设计：-

1) 附件 A - 使用精灵制作

注意：忽略菜单项的排列

优点： 效果很好并且具有所需的外观

缺点： 如果需要的话添加另一个菜单项，必须为该特定菜单项手动制作另一个图像。 IE。不可扩展

2) 附件 B

优点：非常可扩展。如果必须添加另一个菜单项，则不需要制作新的额外图像。只需要在 html 代码中输入菜单名称即可。

缺点：悬停效果与所需的外观不同。

我的要求

是使用附件B以及附件A的悬停效果，但无需添加创建菜单项时的额外图像（这就是图 A 中发生的情况，尽管它具有所需的悬停效果）。

我的方法：

1. 开始使用附件B
2. 对于单个菜单项的悬停效果，使用 3 个图像

a) 最左边

b) 中间区域的重复切片

c) 最右边缘

这是正确的吗？

这可能吗？

有更好的办法吗？一个教程的链接就可以了。

谢谢

---

1] 附件 A 的 css 代码

@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] 附件 B 的 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

好吧，从技术上讲，您只需要两个精灵，一个宽的左侧+选项卡主体和一个右侧。我所说的宽度，是指 400 像素或某个您预计不会碰到的任意宽度尺寸。您用 1 kb 来换取易用性。您可以通过使用如下标记来实现此目的：

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

使用 css like:

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 上的背景重叠，因此您需要确保它没有任何透明度。

另外，为了完整起见，您可能需要对 li 和 a 应用高度（这可能需要使用 display:inline-block 或 line-height 来获取）以使所有内容都对齐。