Question

我已经制作了一个多层导航菜单，并且存在一个问题，即第1层以下的层在选项左侧有一个意外的阻止。我认为问题源于背景渐变但到目前为止还无法解决问题。有人可以帮我解决这个问题吗？在下面放了一个链接。

以下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;}

Answer 1

由于某种原因，你的menu1，menu2等有额外的左边填充。不确定如何。但是你需要做的就是将padding-left设置为0：

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

从ul.menu2 {...}中删除“left：-40”，使其看起来不错。

CSS导航菜单（背景渐变问题）

1 个答案: