Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

kklo

Terceiro nível de menu

Por , em Desenvolvimento frontend

Recommended Posts

kklo    0

kklo
Postado

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;
}
#top-menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#top-menu ul li {
float: left;
}
#top-menu ul li a {
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;
}
#top-menu ul li:hover > a {
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

Compartilhar este post

Link para o post
Compartilhar em outros sites

kklo    0

kklo
Postado

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>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito