Question

我有一个垂直导航栏，其中包含将鼠标悬停在第一个选项上后显示的选项。当我在左侧有边距时，您会看到第一个项目符号前面出现一个圆形项目符号。有没有人解决这个问题？我似乎无法解决它。

.nav
{
margin-left: 30px;
}
.nav li {
list-style:none !important;
color:black;
font-size:30px;
text-decoration:none;
}

.nav ul {
padding:0;
margin:0;
background-color: white;
}

.nav ul li {
list-style: none !important; 
float:left;
}

li > a
{  
background-image: url("media/pics/triangle.png");
background-repeat: no-repeat;
background-size: 30px 30px;
background-position: right -10px;
} 

li > a:only-child 
{
background-image: none;
list-style-type: none;
}

.nav ul li a {
color:black;
font-size:30px;
text-decoration:none;
}

.nav li a:hover {

}

.nav ul li ul { display:none; } /* Makes the Dropdown menu Hidden by default */

.nav ul li:hover  ul  { /* Displayes the Dropdown menu when Hovered over the specific navigation item */
z-index:99999;
display:list-item !important;
position:absolute;
}

.nav ul li:hover  ul li {
float:none;
list-style:none !important;
}

http://jsfiddle.net/zsPE9/

Answer 1

这是因为display:list-item !important :hover添加了.nav ul li。

您可以使用display:block或list-item以外的其他内容。

.nav ul li:hover ul  {
    z-index:99999;
    display:block;      /* Changed from display:list-item !important */
    position:absolute;
}

UPDATED EXAMPLE

此外，您应该尽可能避免使用!important。它基本上从CSS中删除了 cascade 性质。

Answer 2

您display设置了list-item。这可能是造成问题的原因。相反，可以使用block或inline。请在此处查看其他选项：http://www.w3schools.com/cssref/pr_class_display.asp。另外，下次请发布导致问题的代码：）。

子弹点出现时不应该出现

2 个答案: