<style type="text/css">

<!--

li {

 display: block;

 padding: 0;

 margin: 1px 0 0;

 list-style: none;

 width:150px;

 text-align:center;

 background-color:#FFCC33; 

}

li a:link,li a:visited{

 display:block;

 color:#000000; 

 padding:2px 5px;

 height:1%;

}

li a:hover{

 font-weight:bold;

}

li ul{

 position:absolute;

 visibility:hidden;

 left:100px;

 top:0px;

}

li li {

 background-color:#FF6600;

}

li li ul{

 position:absolute;

 visibility:hidden;

}

li li li {

 background-color:#3399FF;

}

li:hover ul{

 visibility:visible;

}

li:hover ul ul{

 visibility:hidden;

}

li:hover{

 background-color:#666666;

 position:relative;

}

li li:hover ul{

 visibility:visible;

}

-->

</style>

<ul>

  <li><a href="">menu item</a></li>

  <li><a href="">menu item</a></li>

  <li><a href="">menu item</a>

   <ul>

    <li><a href="">1stsubmenu item</a></li>

    <li><a href="">1stsubmenu item</a></li>

    <li><a href="">1stsubmenu item</a>

     <ul>

      <li><a href="">2ndsubmenu item</a></li>

      <li><a href="">2ndsubmenu item</a></li>

      <li><a href="">2ndsubmenu item</a></li>

      <li><a href="">2ndsubmenu item</a></li>

      <li><a href="">2ndsubmenu item</a></li>

     </ul>

    </li>

    <li><a href="">1stsubmenu item</a></li>

    <li><a href="">1stsubmenu item</a></li>

   </ul>

  </li>

  <li><a href="">menu item</a></li>

  <li><a href="">menu item</a></li>

 </ul>

如上圖,，在制作數(shù)碼熱銷排行的頁面時(shí)，每種手機(jī)的圖片都是固定的160×120大小,，但是出于頁面美觀及內(nèi)容可讀性的考慮,，在列表頁上圖片都壓縮為原大小的50%顯示；也就是80×60像素大小,。不過當(dāng)用戶將鼠標(biāo)移動(dòng)到縮略圖上時(shí),，我們會(huì)按原圖大小顯示出來。類似的效果在抓蝦上也被應(yīng)用在顯示用戶頭像上：

抓蝦使用的技術(shù)是利用一個(gè)隱藏的浮動(dòng)層,，每張縮略圖上注冊mouseover事件,，當(dāng)鼠標(biāo)移動(dòng)到縮略圖上時(shí)，設(shè)置浮動(dòng)層中img元素的src屬性為頭像的圖片URL,，然后通過JavaScript計(jì)算絕對定位,，將放大后的頭像顯示在縮略圖上。

事實(shí)上,，如果圖片顯示的大小已經(jīng)固定的話,，不需要JavaScript，只需要純CSS就可以實(shí)現(xiàn)類似的效果,。如在數(shù)碼產(chǎn)品熱銷排行頁中,，CSS的定義大致如下：

.DigitalImage a {
position: relative;
}
.DigitalImage a:hover {
position: relative;
z-index: 1;
border: none;
}
.DigitalImage a img {
position: static;
width: 80px;
height: 60px;
border: none;
}
.DigitalImage a:hover img {
position: absolute;
z-index: 2;
width: 160px;
height: 120px;
border: 1px solid #CCC;
left: -40px;
top: -30px;
}

原理很簡單，設(shè)置a元素的position屬性為relative,，圖片最開始顯示為50%大小,，使用默認(rèn)定位；當(dāng):hover被觸發(fā)的時(shí)候，圖片更改為絕對定位,，同時(shí)顯示為原圖大小,，為了使效果看起來像是對稱的蓋在縮略圖上，同時(shí)設(shè)置top和left為縮略圖的寬高的一半的負(fù)數(shù),。

以上CSS中比較讓人費(fèi)解的大概就是粗斜顯示的 border:none 一句,。這看似一個(gè)毫無意義的效果，可是如果沒有這一句的話,，在IE6中就無法觸發(fā)hover,。

以前未曾遇到類似的問題，一番google,，才知道這是IE6處理CSS偽類:hover的Bug。例如如下的代碼：

<style>
a {}
a span {color: green;}
a:hover {}
a:hover span {color: red; }
</style>
<a href=”http://www.taobao.com“> 淘寶網(wǎng) <span> 淘你喜歡 </span></a>

在IE7/FF中,，鼠標(biāo)移動(dòng)到鏈接上時(shí),，”淘你喜歡”字樣會(huì)變?yōu)榧t色，但IE6則無反應(yīng),。所以IE6的bug就是如果a 與 a:hover 的css定義是一樣的,，也就是說如果a:hover 中沒有樣式的改變，hover就不會(huì)被觸發(fā),。但如果在a:hover{}增加一些特定的屬性,，例如

a:hover{border:none;}
或者
a:hover{padding:0;}
又或者
a:hover{background: none;}

此時(shí)hover就可以觸發(fā)了。這樣的屬性還包括direction/text-align/text-indent/float/overflow/position …… 等等,。我在數(shù)碼產(chǎn)品暢銷榜頁面就是選擇了使用border:none,。更詳細(xì)的信息請參考：

• IE Pure CSS Pop Ups Bug
• IE中偽類:hover的使用及BUG

另外，通過閱讀 position:relative/absolute無法沖破的等級,，發(fā)現(xiàn)CSS還有改進(jìn)的空間,，改動(dòng)后如下：

.DigitalImage a:hover {
position: relative;
}
.DigitalImage a img {
position: static;
width: 80px;
height: 60px;
border: none;
}
.DigitalImage a:hover img {
position: absolute;
width: 160px;
height: 120px;
border: 1px solid #CCC;
left: -40px;
top: -30px;
}

改動(dòng)的原理就是去掉了a樣式定義，直接定義a:hover,。這樣即避免了IE6的hover的Bug(position也是一個(gè)觸發(fā)顯示的屬性),，另外也避免了 position:relative/absolute無法沖破的等級 一文中提到的z-index的問題，所以你會(huì)發(fā)現(xiàn)改進(jìn)后的樣式中,，z-index屬性也去掉了,。