ホバーサブメニューが、私はこのプロジェクトに取り組んでいる

Question

カットオフましょう。私は今、 "About"セクションの下にあるホバーサブメニューを持っていますが、ヘッダーの下にはより良い説明がないために表示されています。私はZインデックスを使いこなしましたが、それは何もしていないようです。他に何を試していいのか分かりません。

ありがとうございます！あなたは隠されたオーバーフローを使用しているこのクラス.beforeヘッダ内のヘッダセクションにおいて

#top-navigation { 
 
\t float: left; 
 
} 
 

 
#top-navigation ul { 
 
\t list-style: none; 
 
\t position: relative; 
 
} 
 

 
#top-navigation ul a { 
 
\t display: block; 
 
\t color: #ffffff; 
 
\t text-decoration: none; 
 
} 
 

 
#top-navigation ul li { 
 
\t position: relative; 
 
\t float:left; 
 
\t margin: 0px 10px; 
 
} 
 

 
#top-navigation ul li:hover { 
 
\t background: #f6f6f6; 
 
} 
 

 
#top-navigation ul ul { 
 
\t display: none; 
 
\t position: absolute; 
 
\t top: 100%; 
 
\t left: 0; 
 
\t background: #ffffff; 
 
\t padding: 0; 
 
} 
 

 
#top-navigation ul ul li { 
 
\t float:none; 
 
\t width:200px 
 
} 
 

 
#top-navigation ul ul a { 
 
\t line-height: 120%; 
 
\t padding: 10px 15px; 
 
} 
 
#top-navigation ul ul ul { 
 
\t top: 0; 
 
\t left: 100%; 
 
} 
 

 
#top-navigation ul li:hover > ul { 
 
\t display: block; 
 
}

<div class="before-header"><section id="text-5" class="widget widget_text"><div class="widget-wrap"> \t \t \t <div class="textwidget"><nav id="top-navigation"> 
 
<ul> 
 

 
<li> 
 
<a href="http://www.livingthelighterlife.com/">Home</a> 
 
</li> 
 

 
<li> 
 
<a href="/about/">About</a> 
 
    <ul> 
 
    <li><a href="#">Sub Menu 1</a></li> 
 
    <li><a href="#">Sub Menu 2</a></li> 
 
    <li><a href="#">Sub Menu 3</a></li> 
 
    </ul> 
 
</li> 
 

 
<li> 
 
<a href="#">Contact</a> 
 
</li> 
 

 
<li> 
 
<a href="#">Work With Me</a> 
 
</li> 
 

 
</ul> 
 
</nav></div> 
 
\t \t </div></section> 
 
</div>

Answer 1

チェックclass.before-headerとヘッダdiv、以下の変更を行います。

.before-header { 
    z-index: 500; 
    background: #6d5d68; 
    clear: both; 
    /* overflow: hidden; */ 
    padding: 7px 0; 
    text-align: center; 
    font-family: 'Arquitecta-Medium', 'Source Sans Pro', Helvetica, Arial, sans-serif; 
    font-size: 12px; 
    color: #ffffff; 
    letter-spacing: 1px; 
    text-transform: uppercase; 
} 

Answer 2

。そのため、あなたのサブメニューは表示されません。サブメニューを使用する場所でオーバーフローを使用することはできません。オーバーフローを隠すだけです。