0

我有一个 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;

}

这是我的小提琴 http://jsfiddle.net/squinny/jz4hM/

小提琴也没有真正表现出来。悬停选择器悬停在整个下拉项目上，在 Firefox 中，它悬停在除了左侧下拉项目的四分之一之外的所有内容上，非常烦人。感谢所有想法！

小提琴上的css规范化关闭：http: //jsfiddle.net/squinny/jz4hM/7/

4

2 回答 2

2

您正在使用min-width: 150px;so并相应width地auto设置填充

演示

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*/

右填充演示

于 2012-11-19T16:59:55.730 回答
-1

您需要使用 css 重置文件。

jsFiddle 正在使用它，因此您在那里看不到问题。

http://meyerweb.com/eric/tools/css/reset/

于 2012-11-19T16:59:10.350 回答