HTML/CSS：在菜單標題中隱藏圖像，同時覆蓋子菜單

Question

我有一個菜單，它的標題有圖像，並在圖像不再被徘徊時更改圖像。但是，我希望它在保持相同圖像的同時，將鼠標懸停在打開其下方的子菜單上，而不是恢復到其隱藏狀態。這可以用HTML/CSS來完成嗎？

這裏的CSS代碼：

ul#nav { 
    margin: 0 0 0 0px; 
} 

ul.drop a { 
    display:block; 
    color: transparent; 
} 

ul.drop, ul.drop li, ul.drop ul { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    border: 0px solid #fff; 
    background: transparent; 
    color:  transparent 
} 

ul.drop { 
    position: relative; 
    z-index: 597; 
    float: left; 
} 

ul.drop li { 
    float: left; 
    line-height: 1.3em; 
    vertical-align: middle; 
    zoom: 1; 
} 

ul.drop li.hover, ul.drop li:hover { 
    position: relative; 
    z-index: 599; 
    cursor: default; 
    background: transparent; 
} 

ul.drop ul { 
    display:none; 
    position: absolute; 
    top: 100%; 
    left: 0; 
    z-index: 598; 
    width: 100%; 
    background: transparent; 
    border: 0px solid #fff; 
} 

ul.drop:hover ul { 
    display:block; 
} 
ul.drop ul li { 
    float: none; 
} 

ul.drop ul ul { 
    top: -2px; 
    left: 100%; 
} 

ul.drop li:hover > ul { 
    visibility: visible 
} 

而這裏的HTML

<ul class='drop' id='nav' style='padding-bottom:8px;'> 
    <li><img alt='Share' border='0' onmouseout='this.src=&apos;normal.png&apos;' onmouseover='this.src=&apos;hovered.png&apos;' src='normal.png' style='padding:0px; margin:0px;'/> 
    <ul> 
     <li style='background-color:#202020;width:160px;padding:0px; margin:0px;'> 
     <!-- Share Buttons --> 
     </li> 
    </ul> 
    </li> 
</ul> 

Answer 1

嗯..我有一個特殊的技巧爲你，我希望你喜歡它。我讓HTML這樣的：

<ul id="nav" class="drop"> 
    <li class="icon1">HOVER ME 
     <ul> 
      <li> <a href="#" onclick="alert('Iam clicked')">HIDDEN MENU</a> </li> 
     </ul> 
    </li> 
    <li class="icon1">HOVER ME 2 
     <ul> 
      <li> HIDDEN MENU </li> 
     </ul> 
    </li> 
</ul> 

和特殊的CSS技巧是這樣的：

... 
    ul.drop li.icon1{ 
     background: url(YOUR_IMAGE) no-repeat left top; 
     width: 140px;   
    } 
    ul.drop li.icon1:hover{ 
     background: url(YOUR_IMAGE_HOVER) no-repeat left top; 
    } 
... 

這裏演示：http://jsfiddle.net/CsV7a/