Menu niveis

kklo · October 13, 2013 at 02:46 PM

Ola,

Quero criar niveis em um menu de um template.

este é o código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">

/* 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;
}
/* END Drop Down Menu
******************************************************************/

/********************************************************************************/
/* START Drop Down Menu - 3 nivel
******************************************************************/
#top-menu li ul li ul {
min-width: 200px;
position: relative;
margin: 0px 0 0 150px;
opacity: 0;
/*visibility: hidden;
transition: visibility 0s linear 0.5s,opacity 0.5s linear;
z-index: 12;
padding: 10px;
}
#top-menu li ul li li ul li{
background: #204d5e;
min-width: 312px;
clear: both;
padding: 15px 50px;
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;
}
/* END Drop Down Menu
******************************************************************/
</style>
</head>

<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>
<ul>

</body>
</html>

O CSS START:Top Menu e o START Drop Down Menu são originais do template, não dá para ser alterado para evitar desconfigureação de outras telas.

Tentei desenvolver o START Drop Down Menu - 3 nivel, mas o sub-menu do item 4 está embolado e não estou conseguindo fazer funcionar.

Aceito qualquer ajuda.

Obrigado.

kklo

I-NOZex · October 13, 2013 at 08:11 PM

antes de te ajudarmos, precisamos que tu nos ajudas

pfv, usa as tags

 [/b][i]<html> codigo html </html> [/i][b][/code@][/b] (sem os arrobas)

so depois disso poderei analisar esse codigo

Sign In

Menu niveis

Recommended Posts

kklo

I-NOZex

Create an account or sign in to comment

Create an account

Sign in

Home

Activity

Revista PROGRAMAR

Important Information