高级CSS技巧-鼠标悬停时凸出效果的导航菜单

近日在网上看到这样一个CSS导航菜单例子，如下：

<style media="all" type="text/css">
<!--

body {
    margin: 26px;
    padding: 0;
    background: #fff url(back.png) no-repeat;
}

span {
    display: none;
}

ul {
    position: relative;
    width: 800px;
    background: url(bg_nav.png) no-repeat;
    height: 113px;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

li#bu1 a, li#bu2 a, li#bu3 a, li#bu4 a {
    background: transparent;
    position: absolute;
    width: 110px;
    height: 32px;
    bottom: 0;
    text-decoration: none;
}

/* adjusted values for IE6 */
* html*li#bu1 a,
* html*li#bu2 a,
* html*li#bu3 a,
* html*li#bu4 a {
    bottom: -1px;
}

li#bu1 a {
    left: 21px;
}
li#bu2 a {
    left: 122px;
    background: url(business_hover.gif) 0 0 no-repeat;
}
li#bu3 a {
    left: 223px;
    background: url(personal_hover.gif) 0 0 no-repeat;
}
li#bu4 a {
    left: 324px;
    background: url(information_hover.gif) 0 0 no-repeat;
}

li#bu2 a:hover,
li#bu3 a:hover,
li#bu4 a:hover {
    background-position: 0 -32px;
}

-->
</style>

<div>
<ul>
<li id="bu1"><a href="#"><span>homepage</span></a></li>
<li id="bu2"><a href="#"><span>business</span></a></li>
<li id="bu3"><a href="#"><span>personal</span></a></li>
<li id="bu4"><a href="#"><span>information</span></a></li>
</ul>
</div>

效果不错，可是一看代码，我发现文字都是图片做的，我觉得这样做不太方便更新，不适合动态导航的制作。所以我改了一下。

<style media="all" type="text/css">
<!--

.navigation {
    padding: 0;
    background: #fff url(back.png) no-repeat;
}

.navigation span {
    text-align:center;
    width:110px;
    display:block;
}

.navigation ul {
    position: relative;
    background: url(bg_nav2.png) no-repeat 26px 26px;
    height: 139px;
    list-style-type: none;
    padding:0 0 0 50px;
    margin:0;
}
.navigation li {
    background: #ccc;
    border-left:1px solid #fff;
    border-right:1px solid #fff;
    float:left;
    height:24px;
    width:101px;
    margin-top:109px;
}
li#bu1{
    background: none;
    border:none;
}
li#bu1 a, li#bu2 a, li#bu3 a, li#bu4 a {
    position: absolute;
    width: 110px;
    height: 32px;
    bottom: 0;
    text-decoration: none;
    color:#fff;
    font-size:11px;
    line-height:24px;
}

li#bu1 a { left:47px; color:#000; }
li#bu2 a { left: 148px; }
li#bu3 a { left: 251px; }
li#bu4 a { left: 353px; }

li#bu2 a:hover, li#bu3 a:hover, li#bu4 a:hover {
    background:url(hover.gif);
    font-size:12px;
}

li#bu3 a:hover{    background-position:-136px 0;}
li#bu4 a:hover{    background-position:-273px 0;}

html li#bu1 a:hover,
* html li#bu2 a:hover,
* html li#bu3 a:hover,
* html li#bu4 a:hover {
bottom: -1px;
}

-->
</style>

<div class="navigation">
<ul>
<li id="bu1"><a href="#"><span>homepage</span></a></li>
<li id="bu2"><a href="#"><span>business</span></a></li>
<li id="bu3"><a href="#"><span>personal</span></a></li>
<li id="bu4"><a href="#"><span>information</span></a></li>
</ul>
</div>