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

Question

我做了一个多层导航菜单，但遇到一个问题，即第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;}

Answer 1

由于某种原因，菜单1，菜单2等还有多余的左填充。 不确定如何。 但是您需要做的就是将padding-left设置为0：

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

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