CSSドロップダウンメニューの問題

Question

CSSを使用してドロップダウンメニューを作成しました。すべてのポジショニングが正しいです、それは素晴らしいですね。しかし、サブメニューオプションをクリックすることはできません。カーソルがドロップダウンにつながっているボタンの上にある間にサブメニューが表示されますが、カーソルを下に移動してリンクをクリックしようとすると、メニューは消えます。私はZインデックスと位置を変更しようとしましたが、動作していないようです。

（2つのドロップダウンサブメニューがありますが、サイトはHTMLコードを投稿できません）＃ナビゲーションはナビゲーションバー全体を指します。メニューはサブメニューとサブメニューの両方をラップするdivです個々のサブメニュー） CSSのコードは次のとおりです。

#navigation { width: 100%; background: #1C140D; /*BUTTONS*/ } 
#navigation ul { margin: 0; padding: 0; width: 100%; } 
#navigation ul li { list-style-type: none; display: inline; color:#1C140D; } 
#navigation li a { display: block; float: left; padding: 5px 10px; color: #FFFFFF; text-decoration: none; border-right: 1px solid #FFFFFF; border-left: 1px solid #FFFFFF; border-top: 1px solid #FFFFFF; } 
#navigation li a:hover { background: #000000; color: #FFFFFF; } 
#content-container { float: left; width: 100%; height: 175px; background: #FFFFFF url(/wp-content/uploads/layout-three-fixed-background.gif) repeat-y 100% 0; color: #F2E9E1; } 
ul { font-family: Arial, Verdana; font-size: 14px; margin:0; padding:0; list-style:none; } 
ul li { display: block; position: relative; float: left; color: #1C140D; } 
li ul {display:none; } 
ul li a { display: block; text-decoration: none; color: #1C140D; border-top: 1px solid #FFFFFF; padding: 15px 15px 15px 15px; background: #1C140D; /*BUTTONS*/ margin-left: 1px; white-space: nowrap; } 
ul li a:hover { background:#1C140D; } 
li:hover ul { display: block; } 
ul.sub_menu { position:absolute; border-bottom: 1px solid #FFFFFF; color: #1C140D; top: 30px; } 
li:hover li { float: none; font-size: 14px; color: #1C140D; } 
li:hover a { background: #1C140D; color: #FFFFFF; } 
li:hover li a:hover { background: #1C140D; color: #FFFFFF; } 

Answer 1

はリード湖底を拡大し、それにサブメニューのリストを追加してください。 または、リードボタンの下のサブピクセルを数ピクセル移動して、その上にホバー{ディスプレイ}を移動してみます。

Answer 2

ul.sub_menu { 
    position:absolute; 
    border-bottom: 1px solid #FFFFFF; 
    color: #1C140D; 
    top: 30px; 
} 

あなたの問題は、この行である、あなたはとてもそれを修正するために、あなたのメニュー項目からちょうど100％にあなたのサブメニューを配置するtop:100%にtop:30pxを変更、あまりにも遠く、あなたの親メニュー項目から、あなたのサブメニュードロップダウンをプッシュしているし、それは修正する必要があります。

ul.sub_menu { 
    position:absolute; 
    border-bottom: 1px solid #FFFFFF; 
    color: #1C140D; 
    top: 100%; 
}