No replies
bpat1434
bpat1434's picture
Offline
Enthusiast
Last seen: 14 years 31 weeks ago
Timezone: GMT-5
Joined: 2004-09-17
Posts: 127
Points: 0

Hey guys. After implementing the vertical nav-menu in my site (found the tut here) I now need the ability to add a horizontal menu as a child of one of the drop-down options (like the example in this site).

I have followed all the directions, and can't figure out what is going on. Right now, I get the main drop-downs, but the child (horizontal) doesn't come from the vertical child. Here's some code:

HTML Page

<script type="text/javascript"><!--//--><![CDATA[//><!--
		activateMenu = function(nav) {

			if (document.all && document.getElementById(nav).currentStyle) {  
				var navroot = document.getElementById(nav);
				
				var lis=navroot.getElementsByTagName("LI");  
				for (i=0; i<lis.length; i++) {
				
					if(lis[i].lastChild.tagName=="UL"){
					
						lis[i].onmouseover=function() {	
						
						   this.lastChild.style.display="block";
						}
						lis[i].onmouseout=function() {                       
						   this.lastChild.style.display="none";
						}
					}
				}
			}
		}
		window.onload= function(){
			activateMenu('nav');  
		}
	</script>
</head>

<body>
<center>
<div id='wrapper'>
	<div id='header'></div>
	<div id='navigation'>
		<ul id='nav'>
			<li><a href='#'>Main</a>
				<ul>
					<li><a href=''>Homepage</a></li>
					<li><a href=''>Application</a></li>
					<li><a href=''>Board</a></li>
					<li><a href=''>Carnival</a>
						<ul>
							<li><a href=''>Dates</a></li>
							<li><a href=''>Entertainment</a></li>
							<li><a href=''>Ride-All-Night</a></li>
							<li><a href=''>Parade</a></li>
							<li><a href=''>Ms. Winfield</a></li>
							<li><a href=''>Raffles / Drawings</a></li>
						</ul>
					</li>
					<li><a href=''>Events</a></li>
					<li><a href=''>History</a></li>
					<li><a href=''>Major Calls</a></li>
					<li><a href=''>Meetings</a></li>
					<li><a href=''>Photographs</a></li>
					<hr />
					<li><a href=''>External Links</a></li>
					<li><a href=''>Contact Us</a></li>
				</ul>
			</li>
		</ul>
	</div>

CSS

#navigation{
	width: 800px;
	float: left;
	margin: 0;
	padding: 0;
	background: #fff;
	border-top: 2px groove #666;
	border-bottom: 2px groove #666;
}

#navigation ul{
	padding: 0;
	margin: 0 10px;
	list-style: none;
}

#navigation li{
	float: left;
	position: relative;
	width: 156px;
	background: #fff;
	padding: 0;
	margin: 0;
	font-variant: small-caps;
	cursor: default;
}

#navigation li a,
#navigation li a:link,
#navigation li a:visited{
	color: #000;
	cursor: default;
	display: block;
	background: #fff;
	text-decoration: none;
	font-variant: small-caps;
}

#navigation li:active,
#navigation li:hover,
#navigation li a:active,
#navigation li a:hover{
	text-decoration: none;
	cursor: default;
	font-weight: bold;
	color: #039;
}

#navigation li ul{
	width: 156px;
	display: none;
	position: absolute;
	top: 100%;
	left: 0;

	background: #fff;
	border: 2px groove #666;
	border-top: none;
	margin: 0 -7px;
	padding: 0;
}

/* Hide From IE/Mac \*/
#navigation li ul{
	width: 100%;
	display: none;
	position: absolute;
	top: 19px;
	left: 5px;

	background: #fff;
	border: 2px groove #666;
	border-top: none;
}
/* End Hide */

#navigation li > ul{
	width: 100%;
	top: 100%;
	left: 5px;
	text-align: center;
	padding: 0;
	margin: 0 -7px;
}

#navigation li > ul > hr{
	width: 156px;
	border: 1px groove #abd;
	color: #abd;
	background-color: #abd;
	float: left;
	padding: 0;
	margin: 0;
}

#navigation li li{
	width: 156px;
	font-size: 11px;
	padding: 0;
	margin: 0;
}

#navigation li li a,
#navigation li li a:link,
#navigation li li a:visited{
	width: 146px;
	display: block;
	text-align: center;
	color: #069;
	cursor: default;
	background: #fff;
	text-decoration: none;
	font-weight: normal;
	font-size: 11px;
	border: 5px solid #fff;
	border-width: 0 5px;
}

#navigation li li a:active,
#navigation li li a:hover{
	display: block;
	text-align: center;
	color: #900;
	font-weight: normal;
	border: 5px solid #fc0;
	border-width: 0 5px;
}

#navigation li:hover ul{
	display: block;
}

Any help would be greatly appreciated.

~Brett

~Brett