Estoy haciendo esta web:

Como ven, el menu la tercera opcion se separa el bullet del texto.
El bullet lo estoy manejando como imagen por que con list-style era un drama y no quedaba.
Alguna idea de por que hace eso?
HTML
Código:
Y el CSS:<nav> <ul> <li><a href="nosotros_amasi.html">Nosotros</a> <!--submenu1--> <ul class="submenu"> <a href="nosotros_amasi.html"><li><img style="margin-right:5px;" src="img/bullet.png">Nosotros1</li></a> <a href="nosotros_amasi.html"><li><img style="margin-right:5px;" src="img/bullet.png">Nosotros1</li></a> <a href="nosotros_amasi.html"><li><img style="margin-right:5px;" src="img/bullet.png">Nosotros/zdsdfssdfsdfsdfsdfsd</li> </a> </ul> </li> <li><a href="soluciones_amasi.html">Soluciones</a> <ul class="submenu"> <a href="nosotros_amasi.html"><li>Nosotros1</li></a> <a href="nosotros_amasi.html"><li>Nosotros1</li></a> <a href="nosotros_amasi.html"><li>Nosotros/zdsdfs</li> </a> </ul> </li> </ul>
Código:
Alguien que me de una mano?nav
{
height:39px;
width:1000px;
background-color:#022E5B;
background-image:url(../img/back_menu.png);
clear:both;
}
nav ul,li
{
margin:0px;
padding:0px;
list-style:none;
font-family:Arial, Helvetica, sans-serif;
}
nav ul li a
{
text-decoration:none;
color:white;
text-shadow: 0 1px 1px #D0D0D0;
}
nav ul li
{
float:left;
position:relative;
padding:10px;
background-color:#022E5B;
}
.submenu
{
float:none;
position:absolute;
top:39px;
left:0px;
display:none;
}
nav ul > li:hover .submenu
{
display:block;
}
nav ul li ul li:hover
{
text-decoration:underline;
}
.submenu li
{
float:none;
padding-right:20px;
background-color:#E9EEEE !important;
color:black;
text-shadow:none;
}
Saludos



