Bullet Point появляется, когда не предполагается

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.

Answer 2

У вас есть display, установленный на list-item. Вероятно, это является причиной вашей проблемы. Вместо этого, возможно, используйте block или inline. Другие варианты здесь: http://www.w3schools.com/cssref/pr_class_display.asp. Кроме того, в следующий раз просто отправьте код, вызывающий проблему :).