0

「ドロップダウンメニュー」で2種類のエラーが発生します。助けてください

最初のエラー:

サブメニュー (例: ポートフォリオ 2) でカーソルを右方向に移動すると、黒いボックスが表示されます。カーソルがテキストの上にある場合、これは起こりません (例: ポートフォリオ 2)。- 印刷画面: http://i.imgur.com/qdVrB2m.jpg

2 番目のエラー:

これは私の 2 番目のエラーです。この印刷画面を表示してください: http://i.imgur.com/YEtn9sZ.jpg

デモのライブ リンクを表示する: http://jsbin.com/akugin/1/edit

これは私のhtmlコンテンツです:

<div id="navigasi_menu">
<div class="navigasi_list">
    <div class="menu-main-menu-container">
    <ul class="menu" id="menu-main-menu">

        <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-6" id="menu-item-6">
        <a href="/">Home</a></li>

        <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-7" id="menu-item-7"><a href="#">Portfolio</a>
            <ul class="sub-menu">
                <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-8" id="menu-item-8"><a href="#">Portfolio 1</a></li>
                <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-9" id="menu-item-9"><a href="#">Portfolio 2</a></li>
                <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10" id="menu-item-10"><a href="#">Portfolio 3</a></li>
                <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-11" id="menu-item-11"><a href="#">Portfolio 4</a></li>
                <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-12" id="menu-item-12"><a href="#">Portfolio 5</a></li>
            </ul>
        </li>

        <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-349" id="menu-item-349"><a href="#">Category</a>
            <ul class="sub-menu">
                <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-245" id="menu-item-245"><a href="/?cat=3">Lifestyle</a></li>
                <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-246" id="menu-item-246"><a href="/?cat=4">Interior</a></li>
                <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-367" id="menu-item-367"><a href="/?cat=10">Examples</a></li>
            </ul>
        </li>

        <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-348" id="menu-item-348"><a href="#">Features</a>
            <ul class="sub-menu">
                <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-343" id="menu-item-343"><a href="/?page_id=286">Shortcode</a></li>
                <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-366" id="menu-item-366"><a href="/?p=351">Sample Images</a></li>
                <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-378" id="menu-item-378"><a href="/?page_id=2">Sample Page</a></li>
                <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-397" id="menu-item-397"><a href="/?p=146">Sample Comments</a></li>
            </ul>
        </li>

        <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-14" id="menu-item-14"><a href="http://www.forum.com/">Support</a></li>

    </ul>
    </div>  
</div>
</div>

これは私のcssコンテンツです：

#navigasi_menu {
background:#ffffff;
height:45px;
width:1188px;
float:left;
display:block;
box-shadow:0px 1px 4px #000000;
border-bottom:1px solid #D4D4D4;
border-top:1px solid #D4D4D4;
z-index:9999;
}

.navigasi_list {
height:45px;
margin-left:0;
text-align:left;
}

.navigasi_list a {
color:#333333;
font-family:'bebasneueregular','Oswald','Helvetica Neue','Helvetica',Helvetica,Arial,sans-serif;
padding:0px 17px 0px 19px;
text-decoration:none;
}

#navigasi_menu ul {
list-style:none;
margin:0px;
padding:0px;
}

#navigasi_menu li {
border-right:2px solid #ffffff;
position:relative;
float:left;
font-size:25px;
height:45px;
}

#navigasi_menu li a {
line-height:2;
height:45px;
display:inline-block;
}

#navigasi_menu li:hover {
background:#999999;
float:left;
list-style:none;
}

#navigasi_menu ul li ul {
display:none;
float:left;
left:0;
position:absolute;
z-index:99999;
}

#navigasi_menu ul li ul li {
position:relative;
float:left;
font-size:23px;
width:180px;
color:#ffffff;
border-right:0px;
}

#navigasi_menu ul li ul li:hover {
background:#333333;
color:#B2B2B2;
}

#navigasi_menu ul li ul li a:hover {
background:#333333;
color:#B2B2B2;
}

#navigasi_menu ul li:hover > ul {
display:block;
background:#999999;
border-top:5px solid #cccccc;
}

ありがとうございました。

4

4 に答える 4

0

最初の問題を修正したようです（ホバー時のテキストの色を変更することにより）。

2 つ目の問題については、要素に高さを設定しないことをお勧めします。これは、コンテンツがその高さに収まらない場合にオーバーフローの問題が発生するためです。このような場合は line-height を設定することをお勧めします。そのためheight、要素の を に変更し、単にs のをline-height削除することをお勧めします。height<li>

#navigasi_menu li {
border-right:2px solid #ffffff;
position:relative;
float:left;
font-size:25px;
height:45px;  /* remove this */
}

#navigasi_menu li a {
line-height:2; /* remove this */
line-height:45px; /* add this */
display:inline-block;
}
于 2013-05-06T14:01:19.067 に答える
0

それは少し厄介です。しかし、問題については：

li:hover第 1 の問題:と のスタイルが異なるためですli a:hover。これに変更できます：

#navigasi_menu ul li ul li:hover {
background:#333333;
color:#B2B2B2;
}

#navigasi_menu ul li ul li:hover a { /* Change was here from ...ul li a:hover */
background:#333333;
color:#B2B2B2;
}

2 番目の問題: リスト要素に幅を設定しましたが、これは小さすぎます。幅を広げる:

#navigasi_menu ul li ul li {
position:relative;
float:left;
font-size:23px;
min-width:180px;
  width: 210px; /* Change was here from 180px */
color:#ffffff;
border-right:0px;
}

それは簡単な修正でしたが、もし私があなたなら、うまく機能する例の CSS をチェックします。

変更された JSBIN: http://jsbin.com/eyoziy/1/edit

于 2013-05-06T14:02:53.023 に答える