0

CSS の垂直メニューにデザイン上の問題があります。

機能していますが、カテゴリにマウスを合わせたときに期待した効果がありません

以下に、メイン カテゴリの上にマウスを置くと表示されるシンプルな垂直メニューが表示されます。

ただし、小さな効果が欲しいです。マウスがカテゴリにホバーしているときに、背景色（黒）を追加したいと思います。

それは機能していますが、背景の高さと幅をテキストの高さと幅に正確に合わせたいと思います。現在、理由はわかりません。背景の高さがテキストの高さを超えています。これが今の状況と私がどのようになりたいかの写真です。

現在の様子: 雪が降るなんて

どのようになりたいですか： どのようになりたいか

ここに私のコードHtmlコードがあります

<div id="menu">
                    <ul id="MenuDeroulant">
                        <li style="margin-left:-10px;"><a href="#" style="">Main categorie</a>
                            <ul>            
                                <li><a href="" >Subcat 1</a></li>
                                <li><a href="" >Subcat 2</a></li>

                            </ul>
                        </li>
                    </ul>

ここに私のcssコードがあります:

    #MenuDeroulant
{
    margin: 0;
    padding: 0
}
#MenuDeroulant li
{    
    float: left;
    list-style: none;
}
#MenuDeroulant li a
{    
    display: block;
    padding: 0px 0px;
    text-decoration: none;
    color: #000; 
    white-space: nowrap;
    text-align:center;
}

#MenuDeroulant li a:hover
{    
    background: #000;
    color: #FFF;
} 

#MenuDeroulant li ul
{   visibility: hidden;
    padding: 0px 0px;
}

#MenuDeroulant li ul li
{    
    float: none;
    display: inline;
}

#MenuDeroulant li ul li a
{    
width: auto;
padding: 0px 0px;
} 

#MenuDeroulant li ul li a:hover
{    
background: #0000;
padding: 0px 0px;
}

どうぞよろしくお願いいたします。

アンセルメ

4

3 に答える 3

0

メニューのハイパーリンクにクラスを追加して、margin-bottom:3px を指定すると、コンテナー内のリンクが増加します。

于 2013-03-04T18:06:01.560 に答える
0

width:100%すべての<li>または要素に使用しli a、固定幅を に使用します<ul>。これで問題が解決します。

于 2013-03-04T15:51:15.813 に答える