Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Sou iniciante, mas estou tentando.
estou modificando um template de um site que tem o menu horizontal com CSS assim:
/* START:Top Menu
*********************************************************************************/
#top-menu {
margin: 15px 0 0 0;
position: relative;
z-index: 1;
} list-style-type: none;
margin: 0;
padding: 0;
} float: left;
} font-family: proxima_novasemibold, Arial;
font-size: 17px;
padding: 11px 18px;
color: white;
text-decoration: none;
text-shadow: 0 -1px 0 #0b3751;
-webkit-transition: background 0.5s ease, color 0.3s ease;
transition: background 0.5s ease, color 0.3s ease;
} background: #265668;
border: 1px solid #30677b;
border-radius: 4px;
-webkit-border-radius: 4px;
padding: 10px 17px;
color: #bbecff;==================================================
/* START Drop Down Menu
******************************************************************/
#top-menu li ul {
min-width: 200px;
position: absolute;
margin: 8px 0 0 1px;
opacity: 0;
visibility: hidden;
transition: visibility 0s linear 0.5s,opacity 0.5s linear;
z-index: 12;
}
#top-menu li ul li {
background: #204d5e;
min-width: 212px;
clear: both;
padding: 5px 10px;
border-bottom: 1px solid #bbecff;
}
#top-menu li ul li a {
color: white;
font-size: 14px;
padding: 5px;
}
#top-menu li ul li:hover a {
background: none !important;
border: 0 !important;
padding: 5px !important;
}
#top-menu ul li:hover ul,
#top-menu li li:hover ul,
#top-menu li li li:hover ul {
opacity: 1;
overflow: hidden;
visibility: visible;
transition-delay: 0s;
}
#top-menu li ul li:last-child {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}pesquisei na internet, e todos os menus com níveis são feito são de uma única forma e não estou conseguindo adicionar mais um nível neste menu.
Já mudei valores, dupliquei os ul li, etc... e não consegui.
alguém poderia me ajudar?
obrigado por qualquer ajuda.
kklo
ok, segue o html.
<body>
<div id="top-menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a>
<ul>
<li id="dropDown"><a href="#">Item 3.1</a></li>
<li id="dropDown"><a href="#">Item 3.2</a></li>
</ul>
</li>
<li><a href="#">Item 4</a>
<ul>
<li id="dropDown"><a href="#">Item 4.1</a>
<ul>
<li id="dropDown"><a href="#">Item 4.1.1</a>
<ul>
<li id="dropDown"><a href="#">Item 4.1.1.1</a>
<ul>
<li id="dropDown2"><a href="#">Item 4.1.1.1.1</a></li>
<li id="dropDown2"><a href="#">Item 4.1.1.1.2</a></li>
</ul>
</li>
</ul>
<li id="dropDown2"><a href="#">Item 4.1.2</a>
<ul>
<li id="dropDown2"><a href="#">Item 4.1.2.1</a></li>
<li id="dropDown2"><a href="#">Item 4.1.2.2</a></li>
</ul>
</li>
<li id="dropDown"><a href="#">Item 4.1.3</a></li>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Item 5</a></li>
<li><a href="#">Item 6</a></li>
<li><a href="#">Item 7</a></li>
</ul>
</div>
<div class="clr"></div>Tentei duplicar o START Drop Down Menu, alterando os ul e li, mas sem sucesso.
Amigo, manda a estrutura HTML pra eu poder dar uma olhada.