Submenu 3 Niveis

Dexter Morgan · Maio 6, 2013

Boa tarde, tinha criado esse menu simples, só que agora preciso criar mais dois submenu e nao to conseguindo, segue o código e a demonstração, em artigos ao passar o mouse em listar abriria as categorias e ao passar na categoria as subcategorias ...

<html>

<style>

*{
	margin:0;
	padding:0;
}

html,
body{
	background:#ffffff;
	overflow-x:hidden;
}

li{
    list-style:none
}

#menu{
	display:inline-block;
	position:relative;
	width:100%;
	border-bottom:1px solid #e6e6e6;
	outline:0;
	clear:both;
}

#menu-background{
	margin:0px auto 0 auto;
	width:950px;
	height:29px;
	background:#ffffff;
	border-top:1px solid #e6e6e6;
	border-bottom:4px solid #444444;
}

#menu li{
	float:left;
	position:relative;
	border-top:2px solid #ffffff;
	border-right:1px solid #e6e6e6;
}

#menu li a{
	display:block;
	position:relative;
	padding:0px 14px;
	font-family:segoe ui;
	font-size:0.60em;
	color:#777777;
	font-weight:bold;
	line-height:26px;
	text-transform:uppercase;
	text-decoration:none;
}

#menu li:hover{
	border-top:2px solid #444444;
	outline:0;
	cursor:pointer;
}

#menu li.active{
	border-top:2px solid #444444;
	outline:0;
	cursor:pointer;
}

/**************************************************************************************************/
		/* MENU */
/**************************************************************************************************/

#menu li ul a{	
	float:left;
	width:180px;
	height:28px;
	display:block;
	padding:0px;
	background:#ffffff;
	line-height:25px;
}

#menu .menu-first{
	padding-left:15px;
	width:180px;
	background:#ffffff;
	border-top:2px solid #444444;
	border-left:2px solid #ffffff;
	border-right:1px solid #e6e6e6;
	border-bottom:1px solid #e6e6e6;
	outline:0;
	cursor:pointer;
}

#menu .menu-first:hover,
#menu .menu-first:focus{
	border-top:2px solid #e6e6e6;
	border-left:2px solid #444444;
	outline:0;
	cursor:pointer;
}

#menu .menu{
	padding-left:15px;
	width:180px;
	background:#ffffff;
	border-top:2px solid #ffffff;
	border-left:2px solid #ffffff;
	border-right:1px solid #e6e6e6;
	border-bottom:1px solid #e6e6e6;
	outline:0;
	cursor:pointer;
}

#menu .menu:hover,
#menu .menu:focus{
	border-top:2px solid #ffffff;
	border-left:2px solid #444444;
	outline:0;
	cursor:pointer;
}

#menu .menu-last{
	padding-left:15px;
	width:180px;
	background:#ffffff;
	border-top:2px solid #ffffff;
	border-left:2px solid #ffffff;
	border-right:1px solid #e6e6e6;
	border-bottom:1px solid #e6e6e6;
	outline:0;
	cursor:pointer;
	-moz-border-radius:0 0 3px 3px;
	-webkit-border-radius:0 0 3px 3px;
	border-radius:0 0 3px 3px;
}

#menu .menu-last:hover,
#menu .menu-last:focus{
	border-top:2px solid #ffffff;
	border-left:2px solid #444444;
	outline:0;
	cursor:pointer;	
	-moz-border-radius:0 0 3px 3px;
	-webkit-border-radius:0 0 3px 3px;
	border-radius:0 0 3px 3px;
}

#menu li ul{
	display:none;
	position:absolute;
	top:24px;
	left:-1px;
}

#menu li:hover ul.sub-menu,
#menu li:focus ul.sub-menu{
	margin:0px;
	padding:0px;
	display:block;
	z-index:999;
}

</style>

<body>

	<div id="menu">
	<div id="menu-background">

<ul>

<li ><a style="outline:0;">Artigos</a>
<ul class="sub-menu">

<li class="menu-first"><a href="article.php" style="outline:0;">Listar</a>
<ul class="sub-submenu">

<li><a href="category.php?id_categoria=1" style="outline:0;">Destaque</a>
<ul class="sub-subsubmenu">
<li><a href="subcategory.php?id_subcategoria=101" style="outline:0;">Editorial da Semana</a></li>
<li><a href="subcategory.php?id_subcategoria=102" style="outline:0;">Voz Maldita</a></li>
<li><a href="subcategory.php?id_subcategoria=103" style="outline:0;">Joaquinenses</a></li>
<li><a href="subcategory.php?id_subcategoria=104" style="outline:0;">Edital</a></li>
<li><a href="subcategory.php?id_subcategoria=105" style="outline:0;">Voz Empresarial</a></li>
<li><a href="subcategory.php?id_subcategoria=106" style="outline:0;">Entrevistas</a></li>
</ul>
</li>

<li><a href="category.php?id_categoria=2" style="outline:0;">Notícias</a>
<ul class="sub-subsubmenu">
<li><a href="subcategory.php?id_subcategoria=201" style="outline:0;">São Joaquim da Barra</a></li>
<li><a href="subcategory.php?id_subcategoria=202" style="outline:0;">Região</a></li>
<li><a href="subcategory.php?id_subcategoria=203" style="outline:0;">Brasil</a></li>
<li><a href="subcategory.php?id_subcategoria=204" style="outline:0;">Mundo</a></li>
</ul>
</li>

<li><a href="category.php?id_categoria=3" style="outline:0;">Esporte</a>
<ul class="sub-subsubmenu">
<li><a href="subcategory.php?id_subcategoria=301" style="outline:0;">Futebol</a></li>
<li><a href="subcategory.php?id_subcategoria=302" style="outline:0;">Võlei</a></li>
<li><a href="subcategory.php?id_subcategoria=303" style="outline:0;">Basquete</a></li>
<li><a href="subcategory.php?id_subcategoria=304" style="outline:0;">Atletismo</a></li>
<li><a href="subcategory.php?id_subcategoria=305" style="outline:0;">Outros</a></li>
</ul>
</li>

<li><a href="category.php?id_categoria=4" style="outline:0;">Tecnologia</a>
<ul class="sub-subsubmenu">
<li><a href="subcategory.php?id_subcategoria=401" style="outline:0;">Tec. e Informática</a></li>
<li><a href="subcategory.php?id_subcategoria=402" style="outline:0;">Ciência</a></li>
</ul>
</li>

<li><a href="category.php?id_categoria=5" style="outline:0;">Entretenimento</a>
<ul class="sub-subsubmenu">
<li><a href="subcategory.php?id_subcategoria=501" style="outline:0;">Filmes</a></li>
<li><a href="subcategory.php?id_subcategoria=502" style="outline:0;">TV</a></li>
<li><a href="subcategory.php?id_subcategoria=503" style="outline:0;">Música</a></li>
<li><a href="subcategory.php?id_subcategoria=504" style="outline:0;">Livros</a></li>
</ul>
</li>

<li><a href="category.php?id_categoria=6" style="outline:0;">+ Mais</a>
<ul class="sub-subsubmenu">
<li><a href="subcategory.php?id_subcategoria=601" style="outline:0;">Saúde</a></li>
<li><a href="subcategory.php?id_subcategoria=602" style="outline:0;">Receitas</a></li>
<li><a href="subcategory.php?id_subcategoria=603" style="outline:0;">Gospel News</a></li>
</ul>
</li>

</ul>
</li>

<li class="menu-last"><a href="article_publish.php" style="outline:0;">Publicar</a></li>

</ul>
</li>

<li ><a style="outline:0;">Edições</a>
<ul class="sub-menu">
<li class="menu-first"><a href="edition.php" style="outline:0;">Listar</a></li>
<li class="menu-last"><a href="edition_publish.php" style="outline:0;">Publicar</a></li>
</ul>
</li>

<li ><a style="outline:0;">Banners</a>
<ul class="sub-menu">

<li class="menu-first"><a style="outline:0;">Listar</a>
<ul class="sub-submenu">
<li class="menu-first"><a href="banner_menu300x250.php" style="outline:0;">300x250</a></li>
<li class="menu"><a href="banner_menu450x90.php" style="outline:0;">450x90</a></li>
<li class="menu"><a href="banner_menu728x90.php" style="outline:0;">728x90</a></li>
<li class="menu-last"><a href="banner_menu970x201.php" style="outline:0;">970x201</a></li>
</ul>
</li>

<li class="menu-last"><a style="outline:0;">Publicar</a>
<ul class="sub-submenu">
<li class="menu-first"><a href="banner_menu300x250_publish.php" style="outline:0;">300x250</a></li>
<li class="menu"><a href="banner_menu450x90_publish.php" style="outline:0;">450x90</a></li>
<li class="menu"><a href="banner_menu728x90_publish.php" style="outline:0;">728x90</a></li>
<li class="menu-last"><a href="banner_menu970x201_publish.php" style="outline:0;">970x201</a></li>
</ul>
</li>

</ul>
</li>

<li ><a style="outline:0;">Mídias</a>
<ul class="sub-menu">
<li class="menu-first"><a href="media.php" style="outline:0;">Listar</a></li>
<li class="menu-last"><a href="media_publish.php" style="outline:0;">Publicar</a></li>
</ul>
</li>

<li ><a style="outline:0;">Sociais</a>
<ul class="sub-menu">
<li class="menu-first"><a href="social.php" style="outline:0;">Listar</a></li>
<li class="menu-last"><a href="social_publish.php" style="outline:0;">Publicar</a></li>
</ul>
</li>

</ul>

	</div>
	</div>

<br clear="all" />
<br clear="all" />
<br clear="all" />
<br clear="all" />
<br clear="all" />
<br clear="all" />
<br clear="all" />
<br clear="all" />
<br clear="all" />
<br />

</body>

</html>

https://upllive.com/menu/

Buchechafs · Maio 6, 2013

Conselho:

Ir no site onde pegou esse menu drop down e verificar se você deixou de colocar algum nome de ID.

Outra coisa que pode ser feita é pegar outro menu e refazer, os estilos dele são não são complexos.

Espero ter ajudado.

Dexter Morgan · Maio 6, 2013

esse código eu fiz faz um bom tempo olhando na net, mas faz bastante tempo, nao peguei em um site especifico ...

Dexter Morgan · Maio 7, 2013

consegui resolver, só queria uma explicação, eu estava tentando fazer dessa forma:

#menu li:hover ul.sub-submenu{
    margin-top:-16px;
    margin-left:170px;
    padding:0px;
    display:block;
    z-index:999;
}

#menu li:hover ul.sub-subsubmenu{
    margin-top:-16px;
    margin-left:170px;
    padding:0px;
    display:block;
    z-index:999;
}

e aparecia tudo ao passar o mouse no 1º nivel, ai lembrei que uma vez vi esse parametro > em um menu e coloquei assim:

#menu li:hover>ul.sub-submenu{
    margin-top:-16px;
    margin-left:170px;
    padding:0px;
    display:block;
    z-index:999;
}

#menu li:hover>ul.sub-subsubmenu{
    margin-top:-16px;
    margin-left:170px;
    padding:0px;
    display:block;
    z-index:999;
}

e funcionou, queria saber em quais situações posso usar o > e sua funcionalidade, coloquei só pq tinha visto uma vez e funcionou rsrs

Naty · Maio 7, 2013

Puxa eu tbem queria entender como usar isso... porque estava com o mesmo problema e resolvi usando o >

Entrar

Arquivado

Submenu 3 Niveis

Recommended Posts

Dexter Morgan 7

Compartilhar este post

Link para o post

Compartilhar em outros sites

Buchechafs 6

Compartilhar este post

Link para o post

Compartilhar em outros sites

Dexter Morgan 7

Compartilhar este post

Link para o post

Compartilhar em outros sites

Dexter Morgan 7

Compartilhar este post

Link para o post

Compartilhar em outros sites

Naty 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

Estou criando uma calculadora de m2 e litros de tinta

Cruzamento de Bases

Consulta sem duplicação

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante