圖像鏈接和懸停不起作用，即

Question

我試圖創建一個導航菜單的圖像。儘管Chrome和Firefox沒有問題，但鏈接在IE9中不起作用。懸停效果也不起作用。

查了一下我在提前www.sabourinpaulwedding.ca

謝謝了。 Gilles

HTML是左側的垂直導航欄和右側的內容div。

<div> 
    <ul class="nav"> 
    <li class="welcome"><a class="selected" href="#"></a></li> 
    <li class="ceremony"><a href="ceremony.html"></a></li> 
    <li class="reception"><a href="reception.html"></a></li> 
    <li class="accommodations"><a href="accommodations.html"></a></li> 
    <li class="registry"><a href="registry.html"></a></li> 
    </ul> 
</div> 
<div class="content"> 
    <p>Welcome to the digital home of the future Mr. and Mrs. Paul.</p> 
    <p>&nbsp;</p> 
</div> 

該CSS使用圖像來顯示懸停的鏈接和選定的鏈接。 看來，IE瀏覽器無法訪問導航欄，因爲一個「不可見」的div在上面。 我用導航欄的z-index玩過。這沒有用。

ul.nav 
{ 
    list-style-type: none; 
    padding: 0; 
    margin: 0; 
    float: left; 
    z-index: 20; 
} 

ul.nav a 
{ 
    border: 0px solid #cccccc; 
    display: block; 
    height: 0px; 
    padding-top: 72px; 
    width: 265px; 
    overflow: hidden; 
} 

/* Welcome Button */ 
.nav li.welcome a { background:url('images/welcome_en_normal.png') no-repeat; background-position:0px 0px; } 
.nav li.welcome a:hover { background:url('images/welcome_en_hover.png') no-repeat; background-position:0px 0px; } 
.nav li.welcome a.selected { background:url('images/welcome_en_selected.png') no-repeat; background-position:0px 0px; } 

/* Ceremony Button */ 
.nav li.ceremony a { background:url('images/ceremony_en_normal.png') no-repeat; background-position:0px 0px; } 
.nav li.ceremony a:hover { background:url('images/ceremony_en_hover.png') no-repeat; background-position:0px 0px; } 
.nav li.ceremony a.selected { background:url('images/ceremony_en_selected.png') no-repeat; background-position:0px 0px; } 

工作雖然是從內容一側刪除所有p標籤......但我確實需要一些內容（顯然）。問題不在於css .p選擇器，因爲如果我刪除了那裏的所有內容，這些鏈接仍然不起作用。

Answer 1

這可能是因爲標籤是空試試這個標記

<ul class="nav"> 
    <li class="welcome"><a href="#" class="selected">Welcome</a></li> 
    <li class="ceremony"><a href="ceremony.html">Ceremony</a></li> 
    <li class="reception"><a href="reception.html">Reception</a></li> 
    <li class="accommodations"><a href="accommodations.html">Accomodations</a></li> 
    <li class="registry"><a href="registry.html">Registry</a></li> 
    </ul> 

和CSS

ul.nav a { 
    border: 0 solid #CCCCCC; 
    display: block; 
    height:0; 
    padding-top: 72px; 
    width: 265px; 
    overflow:hidden; 
} 

有被搜索引擎友好的獎金副作用