小さな45x45px画像からどのように全長フェードインメニューを作成できますか？

Question

私は全長（幅：100％）のフェードインメニューを表示しようとしていますが、45px x 45pxの小さな画像の上を移動すると表示されますか？ 私はいったんホバリングしても運がないと100％幅でメニューを取得する方法を試しました。以下のコードは、ステップの点で私にとって最も理にかなっているようですが、それでも動作しません。どんな助けもありがとう。

は、あなたのメニューのHTMLが間違っていた エドウィン

.nav { 
 
\t position: relative; 
 
\t display: block; 
 
\t text-align: center; 
 
\t width: 45px; 
 
} 
 

 
.menu { 
 
\t display: none; 
 
\t position: absolute; 
 
\t background-color: #aaaaaa; 
 
\t background: rgb(204, 204, 204); 
 
\t background: rgba(204, 204, 204, 0.1); 
 
\t width: 100%; 
 
\t height: 75px; 
 
\t transition-delay: 5s; 
 
} 
 

 
.nav:hover .menu { 
 
\t display: block; 
 
\t animation: fadein 2s; 
 
} 
 

 
@keyframes fadein { 
 
\t from {opacity: 0;} 
 
\t to {opacity: 3;} 
 
} 
 

 
li { 
 
\t text-decoration: none; 
 
\t list-style: none; 
 
\t display: inline-block; 
 
\t margin-right: 75px; 
 
\t margin-top: 25px; 
 
\t font-size: 1.5em; 
 
\t color: #ffffff; 
 
\t text-shadow: 1px 1px #3fddff; 
 
\t font-weight: bolder; 
 
}

<nav class="nav"> 
 
\t \t <img src="down-arrow.png" height="45px" width="45px" alt="Down Arrow" class="down"> 
 
\t \t \t <ul class="menu"> 
 
\t \t \t \t <a href="#"><li>Example1</li></a> 
 
\t \t \t \t <a href="#"><li>Example2</li></a> 
 
\t \t \t \t <a href="#"><li>Example3</li></a> 
 
\t \t \t </ul> 
 
\t </nav> \t

Answer 1

、ありがとうございます。 liは、直接の子孫であるulである必要があります。ナビゲーションからabsoluteを削除すると、は画像とメニューの間にマウスを置くと、.nav:hover .menuが.menuと表示され続けるように、ページ上のスペースを取ることができます。また、から幅を削除して、.menuリンクがページの幅を広げることができるようにしました。

.nav { 
 
\t position: relative; 
 
\t display: block; 
 
} 
 

 
.menu { 
 
\t display: none; 
 
\t background-color: #aaaaaa; 
 
\t background: rgb(204, 204, 204); 
 
\t background: rgba(204, 204, 204, 0.1); 
 
\t width: 100%; 
 
\t height: 75px; 
 
\t transition-delay: 5s; 
 
    text-align: center; 
 
} 
 

 
.nav:hover .menu { 
 
\t display: block; 
 
\t animation: fadein 2s; 
 
} 
 

 
@keyframes fadein { 
 
\t from {opacity: 0;} 
 
\t to {opacity: 3;} 
 
} 
 

 
li { 
 
\t text-decoration: none; 
 
\t list-style: none; 
 
\t display: inline-block; 
 
\t margin-right: 75px; 
 
\t margin-top: 25px; 
 
\t font-size: 1.5em; 
 
\t color: #ffffff; 
 
\t text-shadow: 1px 1px #3fddff; 
 
\t font-weight: bolder; 
 
}

<nav class="nav"> 
 
\t \t <img src="down-arrow.png" height="45px" width="45px" alt="Down Arrow" class="down"> 
 
\t \t \t <ul class="menu"> 
 
\t \t \t \t <li><a href="#">Example1</a></li> 
 
\t \t \t \t <li><a href="#">Example1</a></li> 
 
\t \t \t \t <li><a href="#">Example1</a></li> 
 
\t \t \t </ul> 
 
\t </nav> \t

Answer 2

あなたは「幅：100％」と言うあなたがビューポート全体、またはコンテナ要素のちょうど全体の幅を意味していますか？