Jump to content
kklo

Menu niveis

Recommended Posts

kklo

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

Edited by Rui Carlos
GeSHi

Share this post


Link to post
Share on other sites
I-NOZex

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

  • Vote 1

B2R » Beat2Revolution v3.0b | Regista e divulga-nos

beat2revolution.net

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.