Oi pessoal. Estou criando um menu e estou com certa dificuldade. Nos itens que "vão para baixo" há um espaço em branco na esquerda que não consigo tirar de jeito nenhum, como vocês podem ver na imagem. Meus códigos HTML e CSS estão logo abaixo. Se puderem me ajudar, agradeceria muito :)
<body>
<div id="banner"> </div>
<div id="menu">
<nav>
<ul class="menu">
<li><a href="#">Index</a>
</li>
<li><a href="#">A Série</a>
</li>
<li><a href="#">Personagens</a>
<ul>
<li><a href="#">Ted Mosby</a></li>
<li><a href="#">Robin Scherbatsky</a></li>
<li><a href="#">Barney Stinson</a></li>
<li><a href="#">Marshall Eriksen</a></li>
<li><a href="#">Lily Aldrin</a></li>
</ul>
</li>
<li><a href="#">Episódios Especiais</a>
</li>
<li><a href="#">Entre em contato</a>
</li>
</div>
.menu{
list-style:none;
}
.menu li{
position:relative;
float:left;
}
.menu li a{
color:black;
text-decoration:none;
padding:10px 85px;
display:block;
}
.menu li a:hover{
background:#4C7EA5;
color:#fff;
text-shadow:0px 0px 5px #fff;
}
.menu li ul{
position:absolute;
top:100%;
left:0;
background-color:#fff;
display:none;
}
.menu li:hover ul, .menu li.over ul{
display:block;
}
.menu li ul li{
display:block;
width:100%;
}
