0

複数階層のナビゲーション メニューを作成しましたが、階層 1 より下の階層でオプションの左側に予期しないブロックが表示されるという問題があります。背景のグラデーションが原因で問題が発生していると思いますが、これまでのところ問題を解決できていません。誰でも私のためにこれに光を当てることができますか? 下にリンクを貼っています。

http://tinypic.com/r/2pr7alj/5

以下の HTML コード:

    <div id="menu">
        <ul class="menu1"><!--Start of menu level 1-->
            <li>@Html.ActionLink("Home","#","Home")
            </li>
            <li>@Html.ActionLink("A","#","A")  
            <li>@Html.ActionLink("B","#","B")
                <ul class="menu2"><!--Start of menu level 2-->
                    <li>@Html.ActionLink("1","#","1")
                    <li>@Html.ActionLink("2","#","2") 
                    <li>@Html.ActionLink("3","#","3")
                    </li><!--End of menu level 2-->
                </ul>
            </li>
            <li>@Html.ActionLink("C","#","C")
            </li>
        </ul><!--End of menu level 1-->
      </div>

以下は、メニューに関するCSSです。 

#menu {
width:100%;
height:44px;
background: linear-gradient(to bottom, #7db9e8 19%,#2989d8 51%,#1e5799 67%,#1e5799           81%,#207cca 100%);}

ul.menu1 {
list-style-type:none;
float:left;
margin-top:0px;}

ul.menu2, ul.menu3, ul.menu4{
list-style-type:none;}

ul li {
float:left;
width:200px;
position:relative;}

ul li a {
text-decoration:none;
font-size:1em;
color:#fff;
font-weight:bold;
display:block;
padding: 5px 5px 5px 5px;
margin:0px;
line-height:32px;
border:1px solid;
text-align:center;
white-space:nowrap;}

ul.menu2 {
display:none;
position:absolute;
left:-40px;}

ul.menu3, ul.menu4 {
display:none;
position:absolute;
left:160px;
top:0px;}

ul li:hover ul.menu2 {
display:block;
background-color:#2472bb;}

ul ul li:hover ul.menu3 {
display:block;
background-color:#2472bb;}

ul ul ul li:hover ul.menu4 {
display:block;
background-color:#2472bb;}

ul li:hover > a {
background-color:#839ab6;}

ul li:hover a:hover {
background-color:#538dd5;}
4

1 に答える 1

0

何らかの理由で、メニュー 1、メニュー 2 などに余分な左パディングがあります。方法がわからない。ただし、必要なのは padding-left を 0 に設定することだけです。

ul.menu1, ul.menu2, ul.menu3, ul.menu4{
padding-left:0;
}

そして、見栄えを良くするために、ul.menu2{...} から "left:-40" を削除します。

于 2013-06-24T23:25:37.387 に答える