CSS：ドロップダウン・サブメニューがホバリングしても整列しない

Question

以下のナビゲーションバーがありますが、メインナビゲーションバーの下部に並んだドロップダウンメニューは表示されません。また、ドロップダウンメニューの見出しの1つをクリックすると消える問題があります。

---

<ul> 

<li><a href="index.php">Home</a></li> 
<li><a href="donate/index.php">Donate</a></li> 
<li><a href="vote/index.php">Vote</a></li> 

<li class='sub'><a href="#">Info</a> 
<ul> 
<li class='sub'><a href="#">Player Guide</a></li> 
<hr /> 
<li class='sub'><a href="#">Server Commands</a></li> 
<hr /> 
<li class='sub'><a href="#">Community Rules</a></li> 
<hr /> 
<li class='sub'><a href="#">The Team</a></li> 
<hr /> 
<li class='sub'><a href="#">Staff Handbook</a></li> 
<hr /> 
<li class='sub'><a href="#">Server Alumni</a></li> 
</ul> 
</li> 
<li>Live Map</li> 

</ul> 

<hr /> 
</div> 

ここにCSS：https://jsfiddle.net/s3q04h5q/

Answer 1

アライメントの問題は、あなたのCSSです。次を参照してください。

#menu > ul > li:hover > ul { 
    opacity: 1; 
    top: 65px; 
    visibility: visible; 
    border-style: solid; 
    border-width: 3px; 
    border-color: #7b8e19; 
} 

パディングトップがドロップダウンをさらに押し下げています。 65pxを下げて、あなたは良いはずです。

Answer 2

このビットは、ヘッダ行の下に、あなたのドロップダウンを揃えますが、リンクのヒットボックスを小にして固定することができますされているので、ホバー上のごdropmenuのdissappears

#menu > ul > li:hover > ul{ 
    top: 45px; 
} 

理由がある必要があるとして、topを調整これをドロップダウンリンクに適用してください