本例进一步讨论背景图片制作菜单的方法，目标是实现一个具有3个状态的菜单，如图所示
三状态玻璃效果菜单
首先要准备所需的图片，本例中只是用了一张图片完成这个效果，如图所示：
现在设置HTML代码，如下所示。
<div id="menu">
<ul>
<li><a href="#"><b>Home</b></a></li>
<li><a href="#"><b>Contact Us</b></a></li>
<li><a href="#"><b>Web Dev</b></a></li>
<li><a href="#"><b>Web Design</b></a></li>
<li class="current"><a href="#"><b>Map</b></a></li>
</ul>
</div>
对于列表元素ul和列表项目li进行设置，代码如下。
#menu ul{
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
padding:0 0 0 8px;
margin:0 auto;
list-style:none;
height:50px;
}
#menu ul li{
float:left;
margin:0 2px;
}
设置背景图片，代码如下。
#menu ul li a{
display:block;
float:left;
line-height:50px;
color:#666;
text-decoration:none;
padding:0 0 0 14px;
background:url(bj1.gif);
}
这是，浏览器中效果如图所示，此时每一个菜单项的普通状态图片已经出现，只是还缺少边缘的配合。
第一层中的左侧滑动门
利用<b>标记，可以挂接右侧边缘所需图像，代码如下：
#menu ul li a b{
display:block;
padding:0 14px 0 0;
background:url(bj1.gif) no-repeat right top;
}
这是浏览器里显示的图像就完全出现了，下面只要设置鼠标经过的效果了
设置第二层滑动门
现在设置第二层滑动门，即鼠标经过时候的效果，代码如下所示：
#menu ul li a:hover{
color:#fff;
background:url(bj1.gif) left center;
}
#menu ul li a:hover b{
background:url(bj1.gif) right center;
}
这时效果如图所示
设置表示当前页面的菜单项
对表示当前页所在的菜单项进行特殊设置，及设置Class=”current”的列表项目。
方法和上麦年也是类似的，代码如下：
#menu ul li.current a{
color:#fff;
background:url(bj1.gif) no-repeat left bottom;
}
#menu ul li.current b{
background:url(bj1.gif) no-repeat right bottom;
}
设置当鼠标经过这个菜单项是，依然用一样的背景，通知使用箭头光标，代码如下：
#menu ul li.current a:hover{
background:url(bj1.gif) no-repeat left bottom;
cursor:default;
}
#menu ul li.current a:hover b{
background:url(bj1.gif) no-repeat right bottom;
}
到现在，该菜单还存在缺点，这个菜单使用了自适应浏览器宽度的方式，也就是浏览器窗口变窄是后，菜单项会自动折行。但个别情况会出现问题，如图所示：
解决这个问题的方法在前面的案列里曾经使用过，即在“#menu ul”设置的样式中曾加如下规则。
white-space:nowrap;
它的含义就是一个菜单项不允许从空白字符处折行，这样效果如图所示：
禁止菜单项内折行