水平導覽列-進階版 CSS 定位 換圖 II

<style type="text/css">
#nav ul {
width: 100%;
}
#nav ul li {
display: inline-block;
 vertical-align: top;
*zoom: 1;
 *display: inline;
}

#nav ul li, #nav  ul li a {
 color: #333;
}
#nav ul li a:hover {
color: #FF0066;
text-decoration: none;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #FF0066;
}
.選單1{
background-image: url("圖檔路徑");
background-position: 0px 0px;
width: 65px;
height: 51px;
display: inline-block;
}
.選單2{
background-image: url("圖檔路徑");
background-position: -70px 0px;
width: 65px;
height: 51px;
display: inline-block;
}

.選單3{
background-image: url("圖檔路徑");
background-position: -140px 0px;
width: 65px;
height: 51px;
display: inline-block;
}
.選單4{
background-image: url("圖檔路徑");
background-position: -210px 0px;
width: 65px;
height: 51px;
display: inline-block;
}
</style>

<!-- html 語法 -->
<div id="nav">

      <ul>
      
        <li title="選單1" name="menu1" id="menu1"><span class="選單1"></span><a href="連結網址或檔案">選單1</a></li>
        <li title="選單2" name="menu2" id="menu2"><span class="選單2"></span><a href="連結網址或檔案">選單2</a></li>
        <li title="選單3" name="menu3" id="menu3"><span class="選單3"></span><a href="連結網址或檔案">選單3</a></li>
        <li title="選單4" name="menu4" id="menu4"><span class="選單4"></span><a href="連結網址或檔案">選單4</a></li>

  </ul>

</div>