I have got a nice CSS menu, but there is a small display error: That grey menu should be appearing directly under the word "Pages". It works fine on other browsers, My CSS: #menu { width: 100%; float: left; } #menu ul.topleft { padding-left:10px; } #menu ul { list-style: none; margin: 0; padding: 0; width: 150px; float: left; } #menu a, #menu h2 { font: bold 12px arial, helvetica, sans-serif; display: block; margin: 0; padding: 2px 3px; } #menu a { border-width: 1px; border-style: solid; border-color: #ccc #888 #555 #bbb; } #menu h2 { color: #fff; } #menu h2:hover { color: #fff; background:url(images/menubg2.png); cursor:pointer; } #menu a { color: #000; background: #999; } #menu a:hover { color: #a00; background: #333 } #menu li {position: relative;} #menu ul ul ul { position: absolute; top: 0; left: 0; } #menu ul ul { position: absolute; z-index: 500; } div#menu ul ul { display: none; } div#menu ul li:hover ul {display: block;} div#menu ul ul, div#menu ul li:hover ul ul, div#menu ul ul li:hover ul ul {display: none;} div#menu ul li:hover ul, div#menu ul ul li:hover ul, div#menu ul ul ul li:hover ul {display: block;} #menu ul li {float: left; width: 100%;} #menu ul li a {height: 1%;} Code (markup): My HTML <div id="menu"> <ul> <li><h2>Home</h2></li> </ul> <ul> <li><h2>Pages</h2> <ul> <li><a href="#">Main Page</a></li> <li><a href="#">About</a></li> </ul> </li> </ul> </div> HTML: What should I add/edit to get everything working fine? Thanks, BP
Well... you've got more UL's than you should, you're positioning off the wrong elements, you're using headers for things that are NOT HEADERS, you have no fallbacks should the css/js not be present, and in general you've made this a hair more complicated than need be. This is what I think you are trying to do: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"><head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>CSS demo menu</title> <style type="text/css"> * { margin:0; padding:0; } * html body { behavior:url('csshover2.htc'); } #menu { list-style:none; text-align:center; font:normal 14px/1.4em tahoma,helvetica,sans-serif; } #menu li { float:left; width:150px; margin-right:2px; position:relative; background:#BCD; } #menu li:active, #menu li:focus, #menu li:hover { background:#CDE; } #menu a { padding:0 8px; display:block; height:1.4em; text-decoration:none; color:#000; } #menu ul { list-style:none; position:absolute; width:10em; height:1%; /* haslayout */ text-align:center; top:1.4em; left:-1000em; } #menu li:active ul, #menu li:focus ul, #menu li:hover ul { left:0; } #menu li li { width:148px; white-space:nowrap; background:#CCC; border:1px solid; border-color:#EEE #666 #666 #EEE; } #menu li li:active, #menu li li:focus, #menu li li:hover { background:#DDD; } </style> </head><body> <ul id="menu"> <li> <a href="#">Home</a> </li> <li> <a href="#">Pages</a> <ul> <li><a href="#">Main Page</a></li> <li><a href="#">About</a></li> </ul> </li> </ul> </body></html> Code (markup): Relies on the csshover2.htc to support IE6 from PeterNed. http://www.xs4all.nl/~peterned/htc/csshover2.htc Hope this helps.
Hehe, thats a recent habit I've picked up, must be puberty Anyway, I already have the .htc file in my menu, atm. I will try it out your way now, EDIT: It works a treat, thank you. Though it hides behind any other elements on the page so you have to add a z-index to #menu li li Thanks, BP
Should only happen if those elements are also absolute positioned - which in my code rarely if ever happens.
Yeah, I had to absolutely position an image to display right on Firefox, but I am fairly sure I fixed that yesterday, I haven't checked. Anyway, I'll give rep to you as soon as I can....or maybe I already have accidentally, cause I get "you must spread some rep around before yo give more to Deathshadow" Thanks again, EDIT: I removed the position and z-index, and everything works fine. BP