CSS Forum

**mushu** · 08-08-2006, 03:06 PM

Here is a link to the webpage in development:
page title
Here is the relevant CSS menu code:

Code:

html,body,table,tr,td,li,p{margin:0;padding:0;font-size:inherit;font-size:101%} /* force proper IE font */
ul,ol,dl{position:relative}
body{font: 0.8em/1.3em Tahoma,Verdana,Arial,sans-serif;text-align: center;background-color: #FFF;padding-bottom:20px;color: #000}

div#menu{width:100%;margin:0;padding:0;background-color:#BDE; text-align:left; z-index:10}
div#menu ul#nav{float:left; margin:0; padding:0; background-color:#FF6; font-size:80%; width:90%; z-index:25}
div#menu ul#nav li{float:right; margin:0 2px; padding:0; list-style-type:none; z-index:50}/*; text-align:left*/
div#menu ul#nav li a{float:left; display:block; padding:0 2px; color:#FFC; background-color:#369A3D; text-decoration:none}
div#menu ul#nav li ul, 
div#menu ul#nav li a ul{position:relative; width:100px; top:5px; left:-10px; float:left; display:none; z-index:200}
div#menu ul#nav li:hover, 
div#menu ul#nav li a:hover{position:relative; background-color:#CDFFA1; color:#006A35; text-decoration:underline; z-index:100}
div#menu ul#nav li:hover ul, 
div#menu ul#nav li a:hover ul{display:block}

I.E. is ALL messed up and I need to deal with that. For the time being I'm using Firefox 1.5.0.6 as the rendering tester, along with Opera 9.01 to ensure it works as intended. My current problem is that I want the pure-CSS drop-down menu to open OVER the page content and not push it down. I've played with Z-INDEX{} until the cows come home (a little Ag humor there) but it seems to have no effect whatsoever. I would like to implement "suckerfish" menus but without the Javascript so they will work in the Linux Lynx browser too.

However, more fundamental problems are at work here, and I am at a loss. I'm hoping some brave soul can take a look and point out my obvious (or not so obvious) error(s). I've spent days at this...help me Obi-wan Kenobi, you're my only hope!

**chrishirst** · 08-08-2006, 03:21 PM

use absolute positioning for the drop downs so they are out of the normal flow and do not affect anything else

**mushu** · 08-08-2006, 03:36 PM

Thanks Chris, I think that won't work, and here's why:

The sub-menus must be relatively positioned with respect the their parents so that it doesn't matter if the browser is full-screen or not. I have two monitors, and when I maximize the browser the content remains centered by the menu goes waaaay over to the right -- if I absolutely positioned the menu, it would be waaay over to the left...isn't the correct?

Note that "nav" is a child of "menu" which is a child of "header" which is a child of "html". And "container" is a child of "body" which is a child of "html" and contains the rest of the page (Lside, Rside, Content). Thus my attempt at z-index{} stuff...

Or am I just confusing myself? If you would be so kind as to supply a tiny snippet of code for me to look at to make sure I understand what you're postulating, I would really appreciate it!

**chrishirst** · 08-08-2006, 03:57 PM

the parent menu container is positioned relative, the sub is then absolute WRT the parent NOT to the body.

like Programming Articles - DHTML - Menus - Drop Down

(one day I'll finish these off

)

**mushu** · 08-08-2006, 07:10 PM

Ok, thanks Chris. Your insight has pointed me in the correct direction. It seems to work now (but other problems have surfaced, see below.) Here is the corrected CSS in case anyone is interested:

Code:

div#menu{width:100%;margin:0;padding:0;background-color:#BDE; text-align:left}

div#menu ul#nav{position:absolute; float:left; margin:0; padding:0; background-color:#FF6; font-size:80%; width:100%}

div#menu ul#nav li{display:block; position:relative; top:2px; right:9px; float:right; margin:0 2px; padding:0; list-style-type:none; text-align:left}

div#menu ul#nav li a{display:block; position:relative; float:left; padding:0 2px; color:#FFC; background-color:#369A3D; text-decoration:none}

div#menu ul#nav li ul, 
div#menu ul#nav li a ul{position:absolute; top:5px; left:0; display:none}

div#menu ul#nav li:hover, 
div#menu ul#nav li a:hover{display:block; position:relative; background-color:#CFA; color:#063; text-decoration:underline}

div#menu ul#nav li:hover ul, 
div#menu ul#nav li a:hover ul{display:block}

The next problem I have is how to left-justify (or left-align) the pop-up sub-menus?! If I say float:left then it moves them clear to the left of the browser window and flashes real fast as long as I'm hovering on the parent menu item. This is a real stumper. Any ideas on this one? I never figured that CSS coding would be so difficult!

**mushu** · 08-10-2006, 01:09 PM

How do I left-justify (or left-align) the pop-up sub-menus?! If I say float:left then it moves the sub-menus clear to the left of the browser window and flashes real fast as long as I'm hovering on the parent menu item. This is a real stumper. Any ideas on this one? I never figured that CSS coding would be so difficult!