CSS HTML, menu subcategoria

Kaayá Pezzuti · Dezembro 24, 2013

Olá pessoal eu to com um problema, e é simples de resolver mas estou tendo dificuldades pois não queria fugir das boas maneiras!..

tenho um menu que contem uma subcategoria em determinado campo, mas estou tendo dificuldades com o css com ele. pois a LI da primeira UL esta interferindo na LI da 2 UL, vou postar o codigo simples para vcs verem.

<html>
<head>
<title>Junior Amorim</title>
<style>
*{
margin:0;
padding:0;
}
body{
	margin:0 auto;
	height:auto;
	max-width:900px;
	}
nav{
	background:#666;
	height:100px;
	}
nav ul{
	position:relative;
	float:right;
	right:50%;
	
	}	
nav ul li{
	position:relative;
	float:left;
	left:50%;
	border:1px solid #000;
	padding:5px;
	margin-right:5px;
	margin-left:5px;
	}
 .ulDois{
	margin-top:100px; 
	 }
ul{

	}	 
</style>
</head>
<body>
<nav>
	<ul>
    	<li>Menu</li>
        <li>Menu</li>
        <li>Menu
        	<ul class="ulDois">
            	<li>Vaijao</li>
                <li>Vaijao</li>
            </ul>
        </li>
        <li>Menu</li>
        <li>Menu</li>
    </ul>    
</nav>
</body>
</html>

eu pensei que pudesse estilizala dessa forma

NAV UL LI{

estilos aqui

}

e na segunda UL

pegar no css assim

NAV UL LI UL (fosse dessa forma para capturar )

é possivel dessa forma? procurando pelas tags uma dentro da outra?

ou preciso usar class ou id?

ja nesse codigo aqui eu consegui faser mas tive que usar varios ID

<html>
<head>
<title>Junior Amorim</title>
<style>
*{
margin:0;
padding:0;
}
body{
	margin:0 auto;
	height:auto;
	max-width:900px;
	}
nav{
	background:#666;
	height:100px;
	}
#ul1{
	float:right;
	position:relative;
	right:50%;
	}	
#ul1 li{
	left:50%;
	position:relative;
	float:left;
	border:1px solid #000;
	padding:5px;
	margin-right:5px;
	margin-left:5px;
	width:62px;
	max-width:90px;
	text-align:center;
	}
#ulDois{
	display:none;
	margin-left:-50px;
	width:80px;
	}
#ul1 li:hover  #ulDois{
	display:block;
	
	}
ul{

	}	 
</style>
</head>
<body>
<nav>
	<ul id="ul1">
    	<li>Menu</li>
        <li>Menu</li>
        <li>Menu
        	<ul id="ulDois">
            	<li>Vaijao</li>
                <li>Vaijao</li>
            </ul>
        </li>
        <li>Menu</li>
        <li>Menu</li>
    </ul>    
</nav>
</body>
</html>

Obrigado espero que tenha dado para entender meu probema abraços

joaohenriquesouza · Dezembro 24, 2013

Olá Pezzuti, como vai?

Sim, não só é possível, como também é uma boa prática usar a hierarquia da estrutura html para estilizar o css, segue um exemplo da forma que costumo utilizar em meus projetos:

Agora é só adaptar conforme suas necessidades, espero ter ajudado, abraços

botasleve · Dezembro 24, 2013

Hey, usa a função para por codigos no xat, é uma escrita "<>" ali emaixo da carinha feliz. :yes:

@post

Jovem, procure não usar muitas classes e id's, pois suja o código e dificulta a manutenção como você já deve saber...

Tipo tem varias maneiras de vc pegar um li ou coisa do tipo sem ter que ficar entrando na div:

Pseudo-classes

Seletores (sem ser #id e .classes)

Seletores 2

Tipo, se você for um desenvolvedor que tem dedicação na boa isso vai fazer muita diferença na sua vida de desenvolvedor igual fez na minha então da uma lida que vc vai ficar muita PROfissional usando seletores ;)

Kaayá Pezzuti · Dezembro 24, 2013

funcionou exatamente pois meu problema era width que nao tinha determinado ai ele quebrava o layout com esse exemplo consegui achar o problema haha

obrigadoo!!

nav{
	margin-top:-12px;
	
	overflow:hidden;
	background:#;
	}
nav ul{
/*CENTRALIZAR MENUS*/	
	left:50%;
	position:relative;
	float:left;	
	}	
nav ul li{
/*Background Gradiente*/	
background:#000;
background: -moz-linear-gradient(top,  #333 0%, #333 100%) ; /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#333), color-stop(100%,#333)) ; /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #000 0%,#333 100%) ; /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #000  0%,#333  100%) ; /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #000 0%,#333  100%) ; /* IE10+ */
background: linear-gradient(to bottom,  #000 0%, #333 100%) ; /* W3C */
	margin-left:10px;
	margin-right:10px;
	color:#FFF;
	float:left;
	padding:1px 20px 3px 20px;
	min-width:100px;
	border-radius:4px 4px 8px 8px;
	text-align:center;
	font-size:18px;
	border:solid #fff 1px;
	width:120px;
/*CENTRALIZAR MENUS*/	
	right:50%;
	position:relative;
	}
nav ul li ul{
	display:none;
	}	
nav ul li:hover{
/*Background Gradiente*/	
background:#000;
background: -moz-linear-gradient(top,  #000 0%, #787878 100%) ; /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000), color-stop(100%,#787878)) ; /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #000 0%,#787878 100%) ; /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #000  0%,#787878  100%) ; /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #000 0%,#787878  100%) ; /* IE10+ */
background: linear-gradient(to bottom,  #000 0%, #787878 100%) ; /* W3C */
	margin-left:10px;
	margin-right:10px;
	color:#FFF;
	float:left;
	padding:1px 20px 3px 20px;
	min-width:100px;
	border-radius:4px 4px 8px 8px;
	text-align:center;
	font-size:18px;
	border:solid #fff 1px;
/*CENTRALIZAR MENUS*/	
	right:50%;
	position:relative;
	}
nav ul li:hover ul{
	display:block;
}
nav ul li a{
	color:#fff;
	}

meu csss é esse ai estou tentando faze-lo sem usar classe ou id para nao sujar o codigo!

--

vou estudar a fundo os seletores..!!

Obrigado pela dica e os links

só mais uma duvida.. no meu caso quando eu passo o mouse no:HOVER

ele desce o conteudo todo abaixo.. porque?

tentei dar position:absolute mas ai atropela tudo fica um em cima do outro.

Entrar

Arquivado

CSS HTML, menu subcategoria

Recommended Posts

Kaayá Pezzuti 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

joaohenriquesouza 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

botasleve 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Kaayá Pezzuti 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Girls From Your Town - Anonymous Casual Dating - No Selfie

Alteracao Tema Wordpress Profolio

Alteracao Tema Wordpress Profolio

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante