CSS Menu Problems 1

[ecobb]

I've gone through this tutorial to build my horizontal drop down menu, and it works great!

http://www.alistapart.com/articles/horizdropdowns/

But now, I need to add a second submenu to my first submenu and I'm running into problems. The second menu is not hidden, it sticks out there whenever you mouse over the main menu to view the first submenu. Maybe my code can explain it better:

Style Sheet

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

ul {
	color: #FFF8DC;
	display: block;
	background-color=Maroon;
	font-size : 14px;
	text-decoration: none;
	font-family : Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
	list-style: none;
	width: 150px;
}
	
ul li {
	position: relative;
	}

ul li a {
	display: block;
	text-decoration: none;
	color: #FFF8DC;
	background:maroon;
	padding: 0px 0px 0px 2px;
	border: 1px solid #8B8B7A;
	border-bottom: 0;
}
	
ul li a:hover {
	color: Maroon;
	background-color=#C1C19C;
	text-decoration: none;
	}
	
li ul {
	position: absolute;
	left: 149px;
	top: 0;
	display: none;
	}
	
li:hover ul, li.over ul { 
	display: block; }

Javascript

<script language="JavaScript" type="text/javascript">
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
document.getElementById('Cust').style.visibility='hidden';
  }
  node.onmouseout=function() {
  this.className=this.className.replace (" over", "");
  document.getElementById('Cust').style.visibility='';
   }
   }
  }
 }
}
window.onload=startList;
</script>

Menu

<ul id="nav"> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">About</a> 
      <ul> 
        <li><a href="#">History</a></li> 
        <li><a href="#">Team</a></li> 
        <li><a href="#">Offices</a></li> 
      </ul> 
    </li> 
    <li><a href="#">Services</a> 
      <ul> 
        <li><a href="#">Web Design</a></li> 
        [COLOR=red]<li><a href="#">Submenu 2</a>
          <ul>
            <li>Sub link 1</li>
            <li>Sub link 2</li>
            <li>Sub link 3</li>
          </ul>
        </li>[/color]
      </ul> 
    </li>
  </ul>

The colored code is where my problem is, this menu doesn't want to act like the other submenues. Does anyone have any idea what could be going on? I've never tried anything like this with style sheets before so I'm in unknown territory.

Thanks!



Hope This Helps!

Ecobb

"My work is a game, a very serious game." - M.C. Escher

 

[Vragabond]

The problem is that the code you found on Alistapart only supports one level. The thing is that IE still does not understand the css child selector (>) and you have to use descendant which means all the child elements. That is why you are seeing all your submenus immediately. The people who wrote the Alistapart article however tweaked their code to support multi-levels. Find it here: Suckerfish dropdowns.

 

[ecobb]

Man, that is awesome!! Thanks!!




Hope This Helps!

Ecobb

"My work is a game, a very serious game." - M.C. Escher