Ajuda com Menu em HTML e CSS

duzagatto · 26 de fevereiro de 2013

Pessoal, eu estou criando um menu aqui em CSS e HTML, com o background em gradiente, o menu só tem um nivel mesmo é bem simples, mas estou tendo um problema, quando eu passo o mouse sobre a li, o hover não pega toda a li, fica selecionado apenas uma área e eu queria que pegasse toda a li, não sei se vocês entenderam, vou deixar o código abaixo:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Documento sem título</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>

<body>
<div id="menu">
<ul>
<li class="active"><a href="#">HOME</a></li>
<li><a href="#">APOSTILAS</a></li>
<li><a href="#">ARTIGOS</a></li>
<li><a href="#">CURSOS</a></li>
<li><a href="#">DOWNLOADS</a></li>
<li><a href="#">CONTATO</a></li>
</ul>
</div>
</body>
</html>
Código HTML:

@charset "utf-8";
/* CSS Document */

#menu{
margin-top:150px;
background: rgb(12,45,255); /* Old browsers */
background: -moz-linear-gradient(top, rgba(12,45,255,1) 0%, rgba(34,20,158,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(12,45,255,1)), color-stop(100%,rgba(34,20,158,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(12,45,255,1) 0%,rgba(34,20,158,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(12,45,255,1) 0%,rgba(34,20,158,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(12,45,255,1) 0%,rgba(34,20,158,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(12,45,255,1) 0%,rgba(34,20,158,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0c2dff', endColorstr='#22149e',GradientType=0 ); /* IE6-9 */
width:100%;
height:50px;
margin:0 auto;
}

#menu ul{
padding:5px 20px;
margin:0;
float:left;
width:100%;
list-style:none;
}

#menu ul li{
display:inline;
padding:10px 0 0 40px;
color:#FFF;
font:16px "Trebuchet MS", Arial, Helvetica, sans-serif;
}

#menu ul li a{
padding:10px 20px;
float:left;
color:#FFF;
text-decoration:none;
}

#menu ul li a:hover{
padding:10px 20px;
float:left;
text-decoration:underline;
color:#FFF;
}

#menu ul li.active a{
padding:10px 20px;
float:left;
text-decoration:underline;
color:#FFF;
}
Código CSS:

kindiwei · 26 de fevereiro de 2013

Duas formas de você fazer isso, ou você aumenta o padding da tag de link (<a>) até q fique igual ao tamanho do padding (método não eficaz) ou você faz o hover da li no seu código css.


Código CSS:

@charset "utf-8";
/* CSS Document */

#menu{
	margin-top:150px;
	background: rgb(12,45,255); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(12,45,255,1) 0%, rgba(34,20,158,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(12,45,255,1)), color-stop(100%,rgba(34,20,158,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(12,45,255,1) 0%,rgba(34,20,158,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(12,45,255,1) 0%,rgba(34,20,158,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(12,45,255,1) 0%,rgba(34,20,158,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(12,45,255,1) 0%,rgba(34,20,158,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0c2dff', endColorstr='#22149e',GradientType=0 ); /* IE6-9 */
	width:100%;
	height:50px;
        margin:0 auto;
}

#menu ul{
	padding:5px 20px;
	margin:0;
	float:left;
	width:100%;
	list-style:none;	
}

#menu ul li{
	display:inline;	
	padding:10px 0 0 40px;
	color:#FFF;
	font:16px "Trebuchet MS", Arial, Helvetica, sans-serif;
}

#menu ul li:hover{
	float:left;
	text-decoration:underline;
	color:#FFF;
}

#menu ul li a{
	padding:10px 20px;
	float:left;
	color:#FFF;
	text-decoration:none;	
}

#menu ul li.active a{
	padding:10px 20px;
	float:left;
	text-decoration:underline;
	color:#FFF;