Eu tenho alguns códigos para um menu dropdown vertical com 2 camadas. Eu quero fazê-lo com três camadas, mas não consigo fazê-lo funcionar. o que estou fazendo errado?
<html>
<head>
<title>Isso é aleatório</title>
<style>
#menu, #menu ul, #menu li{
padding: 0;
margin: 0;
}
#menu li {
list-style: none;
position: relative;
width: 120px;
height: 30px;
padding: 0 20px;
background-color: black;
line-height: 30px;
cursor: pointer;
}
#menu li a{
text-decoration: none;
color: white;
}
#menu li:hover{
background-color:red;
}
#menu ul ul {
position: absolute;
top: 0;
left: 160px;
visibility: hidden;
}
#menu ul li:hover ul {
visibility: visible;
}
#menu ul ul ul {
position: absolute;
top: 0;
left: 160px;
visibility: hidden;
}
#menu ul ul li:hover ul {
visibility: visible;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#nogo">Casa</a></li>
<li><a href="#nogo">Cubos</a>
<ul>
<li><a href="#nogo">2 x 2</a>
<ul>
<li><a href="#nogo">Regular 2 x 2</a></li>
<li><a href="#nogo">O dobro de 2 x 2</a></li>
<li><a href="#nogo">Triplo 2 x 2</a></li>
<li><a href="#nogo">Quádruplo 2 x 2</a></li>
</ul>
</li>
<li><a href="#nogo">3 x 3</a></li>
<li><a href="#nogo">4 x 4</a></li>
<li><a href="#nogo">5 x 5</a></li>
<li><a href="#nogo">6 x 6</a></li>
<li><a href="#nogo">7 x 7</a></li>
<li><a href="#nogo">Pyraminx</a></li>
<li><a href="#nogo">Skewb</a></li>
</ul>
</li>
<li><a href="#nogo">Minecraft</a>
<ul>
<li><a href="#nogo">Notícias</a></li>
<li><a href="#nogo">Especificações técnicas</a></li>
<li><a href="#nogo">Vídeos</a></li>
</ul>
</li>
<li><a href="#nogo">Link de 4 >></a>
<ul>
<li><a href="#nogo">Link de 4-1</a></li>
<li><a href="#nogo">Link 4-2</a></li>
<li><a href="#nogo">Link 4-3</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>OK, para o comentário abaixo eu não conseguia entender alguma coisa você apenas disse...