Terceiro nível de menu
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
Discussão (3)
Carregando comentários...