イメージの上に画像を表示

Question

私はCSSを初めて使いました。ヘッダーのすぐ下にメニューリストとイメージがあります。

メニューバー内のギャラリーにカーソルを合わせると、画像は下にあるブロックの高さだけ下に置き換えられます。画像を置き換えるのではなく、画像に重なるようにする方法はありますか。ここで

<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> 

は、あなたがそれ absoluteを配置することによって、ドキュメントフローのうち、ドロップダウンメニューを取る必要が私のコードにフィドル、 https://jsfiddle.net/khushboo_sangal/5xLs5odu/

Answer 1

です。親の位置をrelativeに設定してください。

.nav li { 
    position: relative; 
} 

.nav li ul { 
    position: absolute; 
} 

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

また、あなたのネストされたULにいくつか閉じられていない<span />タグを持っていました。これを指摘してくれてありがとうの@vals：

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