在圖像上顯示li內容

我是CSS新手，頭上有一個菜單列表和圖片正下方的標題。在圖像上顯示li內容

當我將鼠標懸停在菜單欄中的圖庫上時，它會將圖像替換爲下方圖塊的高度。是否有任何方法可以使圖像在圖像上重疊而不是取代它。

<header class="container"> 
    <h1>First <br/> Website</h1> 
    <nav> 
     <ul class="nav group"> 
      <li><a href="" title="">Home</a></li> 
      <li><a href="" title="">Gallery</a> 
      <ul> 
       <li><a href="" title=""><span>Images</span></a></li> 
       <li><a href="" title=""><span>Videos<span></a></li> 
       <li><a href="" title=""><span>Animations<span></a></li> 
      </ul> 
      </li> 

     </ul> 
    </nav> 
</header><!-- /header --> 

<section class="container img" id="corousel"> 
    <img src="trolltunga.jpg" alt="Test Image"> 
</section> 

<footer class="container"> 
    More to come... 
</footer>

這裏是一個小提琴我的代碼，https://jsfiddle.net/khushboo_sangal/5xLs5odu/

來源

2016-12-03 user3587856

.nav李UL {位置：絕對;} –

注意，小提琴有一些HTML錯誤（標紅） – vals

您需要通過它定位absolute採取下拉菜單出來的公文流轉。請確保將其父母的位置設置爲relative。

.nav li { 
    position: relative; 
} 

.nav li ul { 
    position: absolute; 
}

https://jsfiddle.net/5xLs5odu/2/

也有一些未關閉的<span />標籤的嵌套UL認證。指出這一點感謝@vals：

<li><a href="" title=""><span>Videos</span></a></li> 
<li><a href="" title=""><span>Animations</span></a></li>

來源

2016-12-03 17:14:35

注意，小提琴已在HTML一些錯誤（標紅色） – vals

@vals感謝您指出。它看起來像JSFiddle抱怨由於一些未封閉的span標籤（儘管它對原始問題沒有影響）。修正在新的小提琴。 –

在圖像上顯示li內容

回答

相關問題