Criando MENU com LI e HOVER

[Scientist 2]

Boa Tarde, estou tentando criar um menu igual a este website: http://wordpress.org/, onde lá em cima fica de uma cor diferente o menu selecionado, então fiz o seguinte:

 

1 - criei o menu

<ul>
   <li><a href=""> MENU 1</a></li>
   <li><a href=""> MENU 2</a></li>
   <li><a href=""> MENU 3</a></li>
   <li><a href=""> MENU 4</a></li>
   <li><a href=""> MENU 5</a></li>
 </ul>

 

No CSS fiz o seguinte:

 

#menu li a:link{
    text-decoration: none;
    color:white;
}

#menu li a:hover{
    color:gray;
  cursor:pointer;
  text-decoration: none;
  background-color:#F5F5F5;
}

 

Só que ao dar um "hover" apenas o link fica com um background e não todo o LI, vamos supor que o LI tenha 200x50, no "hover" todo esse espaço deveria ficar com a cor #F5F5F5 (que aparece um cinza), porém apenas a área do LINk fica com essa cor.

 

O que fazer?

[pinoc 2]

Deixa eu ver se entendi você quer que o botão todo fiquei com a cor e não apenas o link a.

 

a {float: left;}

 

Adicionar isso na tag a.

[Scientist 2]

não funcionou !

[pinoc 2]

Você quer que o menu fique fixo a cor quando estiver na pagina ou que quando por o mouse em sima todo o botão mude de cor?

[Scientist 2]

ambas (active e hover).

[Felipe.P 0]

experimenta colocar um

#menu li a {
padding:5px 10px;
}

 

[Scientist 2]

Felipe a propriedade color do CSS define a cor da fonte e não o fundo de um componente, o certo seria utilizar background-color e mesmo assim não funciona;

 

Perfeito , o padding na tag "a" resolveu o problema.

 

Só tem uma coisa, o a:active não funciona, quando clico em vez de ficar some, mesma coisa ocorre com o a:focus

[André do Vale 76]

Link é inline por padrão, muda o display dele para inline-block, ou até mesmo block (se os li estiverem flutuantes, funciona).

 

Agora, quanto a sumir o texto, fique atento as propriedades de color e background-color. Se estiverem a mesma, ou semelhantes, realmente ficará "invisível".

[Scientist 2]

o que eu quero dizer André Campos é que o :active não funciona, ou seja, mesmo clicando no menu aquela propriedade definida no :active não fica ativa.

[André do Vale 76]

Posta um link por favor para que possamos analisar?

[Scientist 2]

a pagina é local, mais aqui vai uma parte do css que tem o menu

 

/*/////menu////////////*/
#menu{
    height: 70px;
    width: 100%;
    background-color: #363636;
    color:#e0e0e0;
    font-size:20px;
}
#menu ul{
    list-style: none;     
    text-align: center;
}
#menu li{
    float:right;
    padding-top:30px;          
    cursor:pointer;
}

#menu li a{
    text-decoration: none;
    color:white;
    padding:15px 10px;
}

#menu li a:hover{
  color:gray;
  text-decoration: none;
  background-color:#F5F5F5;
  -webkit-border-top-left-radius: 5px;
   -webkit-border-top-right-radius: 5px;
   -moz-border-radius-topleft: 5px;
   -moz-border-radius-topright: 5px;
   border-top-left-radius: 5px;
   border-top-right-radius: 5px;
}

#menu li a:active{
  color:gray;
  text-decoration: none;
  background-color:#F5F5F5;
  -webkit-border-top-left-radius: 5px;
   -webkit-border-top-right-radius: 5px;
   -moz-border-radius-topleft: 5px;
   -moz-border-radius-topright: 5px;
   border-top-left-radius: 5px;
   border-top-right-radius: 5px;
}
/*////////////MENU////////////*/
/*////////////MENU////////////*/

[Felipe.P 0]

a pagina é local, mais aqui vai uma parte do css que tem o menu

 

/*/////menu////////////*/
#menu{
	height: 70px;
	width: 100%;
	background-color: #363636;
	color:#e0e0e0;
	font-size:20px;
}
#menu ul{
	list-style: none; 	
	text-align: center;
}
#menu li{
	float:right;
	padding-top:30px;          
	cursor:pointer;
}

#menu li a{
	text-decoration: none;
	color:white;
	padding:15px 10px;
}

#menu li a:hover{
  color:gray;
  text-decoration: none;
  background-color:#F5F5F5;
  -webkit-border-top-left-radius: 5px;
   -webkit-border-top-right-radius: 5px;
   -moz-border-radius-topleft: 5px;
   -moz-border-radius-topright: 5px;
   border-top-left-radius: 5px;
   border-top-right-radius: 5px;
}

#menu li a:active{
  color:gray;
  text-decoration: none;
  background-color:#F5F5F5;
  -webkit-border-top-left-radius: 5px;
   -webkit-border-top-right-radius: 5px;
   -moz-border-radius-topleft: 5px;
   -moz-border-radius-topright: 5px;
   border-top-left-radius: 5px;
   border-top-right-radius: 5px;
}
/*////////////MENU////////////*/
/*////////////MENU////////////*/

 

Posta o HTML junto pra ficar mais fácil!

[Scientist 2]

codigo html

 

<div id="menu">
               <ul>                                                
                   <li><a href="">Menu 1</a></li>
                   <li><a href="">Menu 2</a></li>
                   <li><a href="">Menu 3</a></li>
                   <li><a href="">Menu 4</a></li>
                   <li><a href="">Menu 5</a></li>                        
                   <li><a href="">Menu 6</a></li>
               </ul>
           </div>

[Samuel Volpato 4]

Ja tentou fazer o :hover na li?

 

Não testei, mas lembro de usado algo parecido com isso uma vez:

 

#menu li{
    background-color: #fff;
    float:right;
    padding-top:30px;          
    cursor:pointer;
}

#menu li:hover{
    background-color: #f5f5f5;
}

[André do Vale 76]

Aqui deu certinho o a:active. Modifiquei um pouco pra poder visualizar melhor:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#menu {
height: 70px;
background-color: #363636;
text-align: right;
}
#menu li {
padding: 30px 0 0 0;
display: inline-block;
}
#menu li a {
text-decoration: none;
color: white;
font-size: 20px;
padding: 15px 10px;
border-radius: 5px 5px 0 0;
outline: none;
}
#menu li a:hover {
color: gray;
background: #F5F5F5;
}
#menu li a:active {
color: red;
background: pink;
}
</style>
</head>

<body>
<ul id="menu">
<li><a href="teste">Menu 1</a></li>
<li><a href="">Menu 2</a></li>
<li><a href="">Menu 3</a></li>
<li><a href="">Menu 4</a></li>
<li><a href="">Menu 5</a></li>
<li><a href="">Menu 6</a></li>
</ul>
</body>
</html>