css - 我的下拉 css 菜单上有一个奇怪的填充问题，不知道它来自哪里或如何删除它

Question

我有一个 CCS 下拉菜单，对我来说效果很好，除了下拉菜单链接左侧有一个奇怪的填充，我不明白它们来自哪里。我在这里和网上搜索过，找不到导致它的原因。也许我由于缺乏经验而错过了它，但我仍然找不到它。我希望下拉列表仅位于中间或左侧，但没有下面显示的填充。请让我知道是什么原因造成的。

 <div>
        <ul id="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">Fruit</a>
        <ul>
             <li><a href="#">Aplle</a></li>
             <li><a href="#">Banana</a></li>
             <li><a href="#">Orange</a></li>
        </ul>
    </li>
    <li><a href="#"> Veggie</a>
        <ul>
             <li><a href="#">Broccoli</a></li>
             <li><a href="#">Tomato</a></li>
             <li><a href="#">Carrot</a></li>
        </ul>
    </li>                                     
        </ul>
    </div>

HERE is my css:

    #menu{
    width:100%;
    background:#318598;
    text-align:center;
    z-index:0;
}

#menu > li{
    display:inline-block;
    position:relative;
    line-height:35px;
    list-style-type: none;
}

#menu li a{
    display:block;
    text-decoration:none;
    padding:0px 10px;
    color:#fff;
    text-align:center;

}
/* Dropdown Event Properties */
#menu li ul{
   position:absolute;
   top: 35px;
   min-width:150px;
   background-color:rgba(0,0,0,0.5);
   z-index:1;
   list-style-type: none;
}

#menu li ul li ul{
    top:0;
    left:150px;               
}

#menu li ul li a:hover{
   background:rgba(255,255,255,0.5);
}

#menu li ul{
    display: none;

}
#menu li:hover > ul{
    display:block;

}

这是我的 fiddle http://jsfiddle.net/squinny/jz4hM/

此外， fiddle 并没有真正显示出来。悬停选择器悬停在整个下拉元素上，在 Firefox 中它悬停在所有元素上，除了左侧下拉元素的四分之一，这非常烦人。感谢所有想法!

css normailized on fiddle 关闭: http://jsfiddle.net/squinny/jz4hM/7/

Answer 1

你正在使用 min-width: 150px; 所以使用 width 作为 auto 并相应地设置 padding

Demo

CSS

#menu li ul{
   position:absolute;
   top: 35px;
   width:auto;
   background-color:rgba(0,0,0,0.5);
   z-index:1;
   list-style-type: none;
}

或者你可以给 padding-right:/*Whatever*/

Right Padded Demo