Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Carcleo

Altura da li e background

Por , em Desenvolvimento frontend

Recommended Posts

Carcleo    4

Carcleo
Postado

Bom dia a todos e um Feliz 2013!

 

Fiz o css abaixo com esperança de que o fundo a cor de fundo da li mudasse quando passasse o mouse por cima dela.

 

Não funcionou

ul#lista_menu
{
 list-style-type:none;
 background-color:#D2E1E8; 
 padding-left:5px;
 margin: 0px auto;
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 border-radius: 0px 0px 10px 10px;
 border: 2px solid #95A9B3;
}

ul#lista_menu li
{
 height:50px;
}
ul#lista_menu li.selected
{
 height:50px;
 background-color:#FFF; 
}

Eis o html

else
{
  echo "<label class=\"topos\" style=\"width:200px;\"> CATEGORIAS</label>";
  echo "<ul id=\"lista_menu\">";
  while(list(
		   $id_categorias,
		   $nome_categorias,
		   $imagem_categorias
		  ) =$categorias_query->fetch_row())
 {
?>   
 <li>
    <a href="produtos.php?acao=listar&id_categorias_produtos=<?php echo $id_categorias;?>">
  <?php echo strtr(strtoupper($nome_categorias),"àáâãäåæçèéêëìíîïðñòóôõö÷øùüúþÿ","ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ×ØÙÜÚÞß");?>
    </a>
    <hr />
 </li>
<?php
 }
echo "</lu>";
}
?>

Outro problema é que eu coloquei a altura da li em 50px. Mas a primeira lí(só ela) saí só com uns 10px para qualquer altura que eu colocar.

aa.png

Como corrigir este erros?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marco Bruno    19

Marco Bruno
Postado

Boa tarde, Carcleo.

 

Acabei de criar um exemplo para uma dúvida similar:

 

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Exemplo de Menu Drop-Down</title>
<style type="text/css">
	* { margin: 0; padding: 0; border: none; list-style: none; }
	.menu a {
		text-decoration: none;
		color: #FFF;
		font: bold 14px/16px Arial, Helvetica, sans-serif;
	}
	.menu li {
		padding: 10px;
		background-color: red;
		float: left;
		position: relative;
		margin-right: 5px;
		cursor: pointer;
	}
	.menu li:hover { background-color: blue; }
	.menu li:hover .submenu { display: block; }
	.submenu {
		display: none;
		position: absolute;
		left: 0; top: 37px;
	}
	.submenu li { float: none; }
</style>
</head>
<body>
<nav>
	<ul class="menu">
		<li><a href="#">Home</a></li>
		<li>
			<a href="#">Fotos</a>
			<ul class="submenu">
				<li><a href="#">Aniversário</a></li>
				<li><a href="#">Natal</a></li>
				<li><a href="#">Ano Novo</a></li>
			</ul>
		</li>
		<li><a href="#">Contato</a></li>
	</ul><!-- #menu -->
</nav>
</body>
</html>

 

O erro da altura do primeiro li, será solucionando com o Reset CSS:

* { margin: 0; padding: 0; border: none; list-style: none; }

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito