Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Galera,
Não consigo fazer um segundo nível para este menu ( encontrei na internet ).
Podem ajudar?
CSS:
#topnav{
padding:15px 0;
z-index:1000;
}#topnav ul, #topnav li{
margin:0;
padding:0;
list-style:none;
font-size:14px;
font-family:Georgia, "Times New Roman", Times, serif;
}#topnav li{
float:left;
margin-right:30px;
}#topnav li li{
margin-right:0;
}#topnav li span{
display:block;
font-size:12px;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
text-transform:lowercase;
color:#999999;
background-color:#4C4C4E;
font-weight:normal;
line-height:normal;
margin:0;
padding:0;
}#topnav li a:link, #topnav li a:visited, #topnav li a:hover{
display:block;
margin:0;
padding:0;
color:#FFFFFF;
background-color:#4C4C4E;
text-transform:uppercase;
font-weight:bold;
}#topnav ul ul li a:link, #topnav ul ul li a:visited{
border:none;
}#topnav li a:hover, #topnav li.active a{
color:#D51D29;
background-color:#4C4C4E;
}#topnav li li a:link, #topnav li li a:visited{
width:150px;
float:none;
margin:0;
padding:7px 10px;
font-size:12px;
font-weight:normal;
color:#FFFFFF;
background-color:#4C4C4E;
border:none;
}#topnav li li a:hover{
color:#D51D29;
background-color:#4C4C4E;
}#topnav ul ul{
z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:170px;
}#topnav ul ul a{width: 140px;}
#topnav li:hover ul{left:auto;}
#topnav li:hover{position: static;}
#topnav li.las{margin-right:0;}
HTML
<html>
<head>
<title>Menu drop-down com sub-sub menus</title>
<link rel="stylesheet" href="styles/layout.css" type="text/css" />
</head>
<body id="top">
<div class="wrapper col3">
<div id="topnav">
<ul>
<li class="active"><a href="index.html">Homepage</a><span>Principal</span></li>
<li><a href="#">Página 1</a><span>Página 1</span></li>
<li><a href="#">Página 2</a><span>Página 2</span></li>
<li><a href="#">Página 3</a><span>Página 3</span>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</li>
<li class="last"><a href="#">Página 4</a><span>Página 4</span></li>
</ul>
</div>
</div>
</body>
</html>Obrigado
Carregando comentários...