Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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
Carregando comentários...