Puntos que molestan

[lfsow]

Hola amigos, verás, estoy haciendo una página web, y he hecho un menú, y debajo, otro. Esto lo he hecho con CSS y con HTML, pero no entiendo porqué salen estos puntos:



El código CSS para estos 2 menús es:

Código:

/* Breadcrumb
-------------------------------------------------------------- */

.breadcrumb {
	background:url(../images/top_bar.png) left top no-repeat;
	width:920px;
	height:49px;
	padding:0px 20px;
	margin-bottom:20px;
	float:left;
}

.breadcrumb h3 {
	float:left;
	color:#e5e5e5;
	padding-top:15px;
}

.breadcrumb ul {
	float:right;
}

.breadcrumb li {
	display:inline;
}

.breadcrumb li a {
	display:block;
	float:left;
	padding:0px 2px;
	line-height:49px;
	font-size:11px;
	color:#e5e5e5;
}


.left_menu {
	width:170px;
	float:left;
}

.left_menu li a {
	font-size:18px;
	color:#231f20;
	padding:15px 20px 15px 20px;
	float:left;
	display:block;
	width:100%;
}

.left_menu li a:hover, .left_menu li a.selected {
	background:url(../images/bullet_selected.jpg) right center no-repeat;
}

.left_menu .blog li a:hover, .left_menu .blog li a.selected {
	background:transparent url(../images/divider.gif) repeat-x scroll left bottom;
}

.center_content {
	float:right;
	width:680px;
}

/* Breadcrumb 2
-------------------------------------------------------------- */

.breadcrumb2 {
	background:url(../images/barra.png) left top no-repeat;
	width:170px;
	height:49px;
	padding:0px 20px;
	margin-bottom:5px;
	float:left;
}

.breadcrumb2 h3 {
	float:left;
	color:#e5e5e5;
	padding-top:17px;
}

.breadcrumb2 ul {
	float:right;
}

.breadcrumb2 li {
	display:inline;
}

.breadcrumb2 li a {
	display:block;
	float:left;
	padding:0px 2px;
	line-height:4px;
	font-size:11px;
	color:#e5e5e5;
}


.left_menu {
	width:170px;
	float:left;
}

.left_menu li a {
	font-size:18px;
	color:#231f20;
	padding:15px 20px 15px 20px;
	float:left;
	display:block;
	width:100%;
}

.left_menu li a:hover, .left_menu li a.selected {
	background:url(../images/bullet_selected.jpg) right center no-repeat;
}

.left_menu .blog li a:hover, .left_menu .blog li a.selected {
	background:transparent url(../images/divider.gif) repeat-x scroll left bottom;
}

.center_content {
	float:right;
	width:680px;
}

Y el HTML:

Código:

 <div class="left_menu">
        	<ul>
            	<li><a class="selected" href="#dweb">Web</a></li>
                <li><a href="#folletos">Folletos/Carteles</a></li>
                <li><a href="#logos">Logos</a></li>
                <li><a href="#publicidad">Publicidad</a></li>
            </ul>
		
		
		<div class="breadcrumb2">
        	
            <h3>Complementos</h3>
		</div>
               <li><a href="#web">Mantenimiento</a></li>
               <li><a href="#olletos">Publicidad</a></li>
               <li><a href="#loos">Otros</a></li>
        </div>

Gracias de antemano y espero ayuda.