html - CSS 导航菜单(背景渐变问题)

Question

我制作了一个多层导航菜单，但遇到一个问题，即低于第 1 层的层在选项左侧有一个意外 block 。我假设这个问题源于背景渐变，但到目前为止还没有解决这个问题。任何人都可以为我阐明这一点吗？ 在下面放了一个链接。

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

Answer 1

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

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

并从 ul.menu2{...} 中删除“left:-40”以使其看起来更漂亮。