Sub-menu não aparece

[correio25]

Boas,

Por que razão .principal ul li:hover >ul não funciona?

body {
background-color: #fff;
}
.principal ul ul {
display: none;
}
.principal ul li:hover > ul {
display: block;
}
.principal ul {
padding: 0 20px;
border-radius: 10px;
list-style: none;
position: relative;
display: inline-block;
background:linear-gradient(top, #efefef 0%, #bbbbbb 100% );
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
}
.principal ul li{
float: left;
}
.principal ul li a {
padding: 5px 10px 5px 10px;
display: block;
color: #757575;
text-decoration: none;
}
.principal ul li:hover {
background: #4b545f;
}
.principal ul li:hover a {
color: #fff;
}
.principal ul li:hover>ul {margin: 0px; padding: 0px;}
.principal ul li:hover>ul li {float: none; display: block;}
.principal ul li:hover>ul li a {color: #666; min-height: 150px;}
.principal ul li:hover>ul li a:hover {color: #fff;}
.principal ul li {position: relative;}
.principal ul li ul {position: absolute; top: 30px; left: 0px;}

<div class="principal">
<ul>
<li><a href="">Home</a></li>
<ul>
 <li><a href="">Missão</a></li>
 <li><a href="">Equipa</a></li>
</ul>
<li><a href="">Portfolio</a></li>
<ul>
 <li><a href="">Projectos A</a></li>
 <li><a href="">Projectos B</a></li>
</ul>
</ul>
</div>

[alexviseu]

Tens os ul fora dos li.

<div class="principal">
<ul>
<li><a href="">Home</a>
        <ul>
	          <li><a href="">Missão</a></li>
	          <li><a href="">Equipa</a></li>
        </ul>
</li>
<li><a href="">Portfolio</a>
        <ul>
	          <li><a href="">Projectos A</a></li>
	          <li><a href="">Projectos B</a></li>
        </ul>
</li>
</ul>
</div>

Edited January 20, 2015 at 09:28 AM by alexviseu

[correio25]

E não podem estar?

[alexviseu]

O UL (Unsorted List) só deve de ter LI (List Items) como filhos.

Dentro desses LIs, podes ter outros ULs e afins.

No entanto, o ponto central para o teu código não funcionar é que mostras o submenu usando o seguinte código CSS:

.principal ul li:hover > ul {
display: block;
}

Estás a mudar o display a um UL que é filho direto de um li (descendente de um UL que é descendente de um elemento com a classe principal) que tenha o rato por cima.

Ora se estás a meter o UL fora do LI, o selector vai falhar e não vai meter nada visível.

[correio25]

Já vi o erro. Obrigado pela explicação.