Thu, 2005-03-31 04:07
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
