Tim Offenstein wrote: > My thanks to Bill for his help unfortunately nothing has changed it > yet. The submenus are still showing up blank on the second mouseover. > I'm hoping for more suggestions. > > Tedd Sperling has a similar menu system that works okay > (sperling.com/examples/menuh) so I'm going to dissect it in the hopes > of discovering why mine's misbehaving. > > -Tim
Tim, I have no idea what's going on in your menu. It certainly seems to be CSS related, but I can't isolate the cause. In my attempts to replicate and quarantine the offending code, I wound up writing a new CSS menu from scratch that you're welcome to use if you like. You can find it here: http://www.theholiergrail.com/tests/cssmenu/index.html ...and I've included the source in this email which can be found immediately proceeding my rather ostentatious signature. In testing, I found success in the following browsers: IE5.5/WinXP IE6/WinXP IE7/WinXP Opera 9.5/WinXP Opera 9.5/Ubuntu Hardy Firefox 3/Ubuntu Hardy Firefox 3/WinXP I didn't crank up my Win/Vista system or download the new Opera, but one can probably assume the results would be as successful as indicated above. I did not encounter any of the blanking elements plaguing your current menu system. Hope this helps. Let me know if you have questions/issues/watermelons. Bill -- /** * Bill Brown * TheHolierGrail.com & MacNimble.com * From dot concept...to dot com...since 1999. ***********************************************/ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd";> <html> <head> <title>Menu Testing</title> <style type="text/css"> a {display:block;padding:5px;position:relative;} ul {border:1px solid #000;list-style:none;margin:0;padding:0;} li {border-right:1px solid #000;list-style:none;margin:0;padding:1px 0;position:relative;} ul ul {background-color:#fff;border-top:0;left:-1px;position:absolute;top:100%;} ul ul ul {position:absolute;left:100%;top:-1px;} li {display:inline;float:left;white-space:nowrap;} li li, li li li{border:0;border-top:1px solid #000;display:block;float:none;} li:hover {background-color:#e5e5e5;} li ul, li:hover li ul, li:hover li:hover li ul{display:none;} li:hover ul, li:hover li:hover ul, li:hover li:hover li:hover ul{display:block;} /** * = Float Behavior Switch * The overflow:hidden switch won't work in this case. */ ul:after { clear: both; content: "..."; display: block; font-size: 1px; height: 0; overflow: hidden; visibility: hidden; } </style> <!--[if IE]><style type="text/css"> html {font-size:100%;} ul {zoom:1} </style><![endif]--> <!--[if lte IE 6]><style type="text/css"> body{behavior:url("csshover.htc");} ul ul {margin-top:1px;} </style><![endif]--> <!--[if lt IE 6]><style type="text/css"> ul ul ul {margin-left:-1em;} </style><![endif]--> </head> <body> <ul> <li><a href="#">Menu Item 1</a> <ul> <li><a href="#">Menu Item 1.1</a> <ul> <li><a href="#">Menu Item 1.1.1</a> <ul> <li><a href="#">Menu Item 1.1.1.1</a></li> <li><a href="#">Menu Item 1.1.1.2</a></li> <li><a href="#">Menu Item 1.1.1.3</a></li> </ul> </li> <li><a href="#">Menu Item 1.1.2</a> <ul> <li><a href="#">Menu Item 1.1.2.1</a></li> <li><a href="#">Menu Item 1.1.2.2</a></li> <li><a href="#">Menu Item 1.1.2.3</a></li> </ul> </li> <li><a href="#">Menu Item 1.1.3</a> <ul> <li><a href="#">Menu Item 1.1.3.1</a></li> <li><a href="#">Menu Item 1.1.3.2</a></li> <li><a href="#">Menu Item 1.1.3.3</a></li> </ul> </li> </ul> </li> <li><a href="#">Menu Item 1.2</a> <ul> <li><a href="#">Menu Item 1.2.1</a> <ul> <li><a href="#">Menu Item 1.2.1.1</a></li> <li><a href="#">Menu Item 1.2.1.2</a></li> <li><a href="#">Menu Item 1.2.1.3</a></li> </ul> </li> <li><a href="#">Menu Item 1.2.2</a> <ul> <li><a href="#">Menu Item 1.2.2.1</a></li> <li><a href="#">Menu Item 1.2.2.2</a></li> <li><a href="#">Menu Item 1.2.2.3</a></li> </ul> </li> <li><a href="#">Menu Item 1.2.3</a> <ul> <li><a href="#">Menu Item 1.2.3.1</a></li> <li><a href="#">Menu Item 1.2.3.2</a></li> <li><a href="#">Menu Item 1.2.3.3</a></li> </ul> </li> </ul> </li> <li><a href="#">Menu Item 1.3</a> <ul> <li><a href="#">Menu Item 1.3.1</a> <ul> <li><a href="#">Menu Item 1.3.1.1</a></li> <li><a href="#">Menu Item 1.3.1.2</a></li> <li><a href="#">Menu Item 1.3.1.3</a></li> </ul> </li> <li><a href="#">Menu Item 1.3.2</a> <ul> <li><a href="#">Menu Item 1.3.2.1</a></li> <li><a href="#">Menu Item 1.3.2.2</a></li> <li><a href="#">Menu Item 1.3.2.3</a></li> </ul> </li> <li><a href="#">Menu Item 1.3.3</a> <ul> <li><a href="#">Menu Item 1.3.3.1</a></li> <li><a href="#">Menu Item 1.3.3.2</a></li> <li><a href="#">Menu Item 1.3.3.3</a></li> </ul> </li> </ul> </li> </ul> </li> <li><a href="#">Menu Item 2</a> <ul> <li><a href="#">Menu Item 2.1</a> <ul> <li><a href="#">Menu Item 2.1.1</a> <ul> <li><a href="#">Menu Item 2.1.1.1</a></li> <li><a href="#">Menu Item 2.1.1.2</a></li> <li><a href="#">Menu Item 2.1.1.3</a></li> </ul> </li> <li><a href="#">Menu Item 2.1.2</a> <ul> <li><a href="#">Menu Item 2.1.2.1</a></li> <li><a href="#">Menu Item 2.1.2.2</a></li> <li><a href="#">Menu Item 2.1.2.3</a></li> </ul> </li> <li><a href="#">Menu Item 2.1.3</a> <ul> <li><a href="#">Menu Item 2.1.3.1</a></li> <li><a href="#">Menu Item 2.1.3.2</a></li> <li><a href="#">Menu Item 2.1.3.3</a></li> </ul> </li> </ul> </li> <li><a href="#">Menu Item 2.2</a> <ul> <li><a href="#">Menu Item 2.2.1</a> <ul> <li><a href="#">Menu Item 2.2.1.1</a></li> <li><a href="#">Menu Item 2.2.1.2</a></li> <li><a href="#">Menu Item 2.2.1.3</a></li> </ul> </li> <li><a href="#">Menu Item 2.2.2</a> <ul> <li><a href="#">Menu Item 2.2.2.1</a></li> <li><a href="#">Menu Item 2.2.2.2</a></li> <li><a href="#">Menu Item 2.2.2.3</a></li> </ul> </li> <li><a href="#">Menu Item 2.2.3</a> <ul> <li><a href="#">Menu Item 2.2.3.1</a></li> <li><a href="#">Menu Item 2.2.3.2</a></li> <li><a href="#">Menu Item 2.2.3.3</a></li> </ul> </li> </ul> </li> <li><a href="#">Menu Item 2.3</a> <ul> <li><a href="#">Menu Item 2.3.1</a> <ul> <li><a href="#">Menu Item 2.3.1.1</a></li> <li><a href="#">Menu Item 2.3.1.2</a></li> <li><a href="#">Menu Item 2.3.1.3</a></li> </ul> </li> <li><a href="#">Menu Item 2.3.2</a> <ul> <li><a href="#">Menu Item 2.3.2.1</a></li> <li><a href="#">Menu Item 2.3.2.2</a></li> <li><a href="#">Menu Item 2.3.2.3</a></li> </ul> </li> <li><a href="#">Menu Item 2.3.3</a> <ul> <li><a href="#">Menu Item 2.3.3.1</a></li> <li><a href="#">Menu Item 2.3.3.2</a></li> <li><a href="#">Menu Item 2.3.3.3</a></li> </ul> </li> </ul> </li> </ul> </li> <li><a href="#">Menu Item 3</a> <ul> <li><a href="#">Menu Item 3.1</a> <ul> <li><a href="#">Menu Item 3.1.1</a> <ul> <li><a href="#">Menu Item 3.1.1.1</a></li> <li><a href="#">Menu Item 3.1.1.2</a></li> <li><a href="#">Menu Item 3.1.1.3</a></li> </ul> </li> <li><a href="#">Menu Item 3.1.2</a> <ul> <li><a href="#">Menu Item 3.1.2.1</a></li> <li><a href="#">Menu Item 3.1.2.2</a></li> <li><a href="#">Menu Item 3.1.2.3</a></li> </ul> </li> <li><a href="#">Menu Item 3.1.3</a> <ul> <li><a href="#">Menu Item 3.1.3.1</a></li> <li><a href="#">Menu Item 3.1.3.2</a></li> <li><a href="#">Menu Item 3.1.3.3</a></li> </ul> </li> </ul> </li> <li><a href="#">Menu Item 3.2</a> <ul> <li><a href="#">Menu Item 3.2.1</a> <ul> <li><a href="#">Menu Item 3.2.1.1</a></li> <li><a href="#">Menu Item 3.2.1.2</a></li> <li><a href="#">Menu Item 3.2.1.3</a></li> </ul> </li> <li><a href="#">Menu Item 3.2.2</a> <ul> <li><a href="#">Menu Item 3.2.2.1</a></li> <li><a href="#">Menu Item 3.2.2.2</a></li> <li><a href="#">Menu Item 3.2.2.3</a></li> </ul> </li> <li><a href="#">Menu Item 3.2.3</a> <ul> <li><a href="#">Menu Item 3.2.3.1</a></li> <li><a href="#">Menu Item 3.2.3.2</a></li> <li><a href="#">Menu Item 3.2.3.3</a></li> </ul> </li> </ul> </li> <li><a href="#">Menu Item 3.3</a> <ul> <li><a href="#">Menu Item 3.3.1</a> <ul> <li><a href="#">Menu Item 3.3.1.1</a></li> <li><a href="#">Menu Item 3.3.1.2</a></li> <li><a href="#">Menu Item 3.3.1.3</a></li> </ul> </li> <li><a href="#">Menu Item 3.3.2</a> <ul> <li><a href="#">Menu Item 3.3.2.1</a></li> <li><a href="#">Menu Item 3.3.2.2</a></li> <li><a href="#">Menu Item 3.3.2.3</a></li> </ul> </li> <li><a href="#">Menu Item 3.3.3</a> <ul> <li><a href="#">Menu Item 3.3.3.1</a></li> <li><a href="#">Menu Item 3.3.3.2</a></li> <li><a href="#">Menu Item 3.3.3.3</a></li> </ul> </li> </ul> </li> </ul> </li> </ul> </body> </html> ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
