My CSS menus are getting chopped off by my footer! :(

Hi everyone,

The page in question is here:
http://www.connections.glowingfaceman.com/connections-in-math
Notice that the "model theory" submenu gets chopped off by the footer. Or that might depend on screen size, so if you can't see it, here's a snapshot:
http://glowingfaceman.com/temp/snapshot.JPG

To fix the problem, it would be sufficient to make the submenus all pop out at the same height, lining up with the top of the main menu instead of with the thing you hovered your mouse over. The relevant entry in CSS is most likely this:

#menu ul ul ul {
position: absolute;
top: 0;
left: 100%; /* to position them to the right of their containing block */
width: 100%; /* width is based on the containing block */
}

Code (markup):

This tells where the submenus are located. For example, if I change the top: to top: -100%;, then that will bump the submenus upwards by the height of one menu item. Problem is, each submenu needs to be bumped upwards by a different amount :/ Any ideas? Thanks a lot You guys rock

 

Try this:

div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul{
display: block;
[COLOR="SeaGreen"]z-index:100;[/COLOR]
}

Code (markup):

 

Sweet, it works in Firefox! Not in IE... I thought of a hacky patch involving a dynamic PHP-generated CSS file, I guess I'll do that conditionally for IE users... (hmm, and testing the site on IE I also noticed IE messed up the positions of everything.. ugh.. freaking internet explorer!)

Sending some love to themetraffic with (my weak pathetic) stumbleupon

 

I can't run the menu locally in IE because of a missing file (htcmime.php... csshover3.htc) but the following might work:

#footer {

[COLOR="Red"]/* Try commenting this positioning out */
/*position: absolute;*/[/COLOR]

[COLOR="SeaGreen"]/* And / or set z-index */
z-index: 10;[/COLOR]

bottom: 0;
width: 100%;
height: 50px;
background: #ECF1EF;
} 

Code (markup):

That's all I can come up with. Appreciating the love.

 

yeah, give the menu a higher z-index than the footer, then ur gellin'

Nice site btw man, spiffy concept!

 

1) don't whitespace strip on a demo you are asking for help on.

2) You might want to try adding a doctype so you aren't hacking around IE being in quirks mode.

3) Character encoding so the validator doesn't throw up it's hands and walk away might not be a bad idea either.

4) use double quotes like the rest of the world, so when you slice it into a CGI/SSI it's not a pain in the ass.

5) you may want to try using SEMANTIC markup - paragraphs around your paragraphs, headings for your headings, not skipping heading levels...

6) after a few minutes of cleaning up adding the formatting back in, you are absolute positioning the footer and the footer is source-order after the menu, of COURSE it's rendering over your menu items. As Dabzo said, use z-index, that or switch to a proper min-height model instead of dicking with absolute positioning on a flow element.

 

Thanks ywp That worked in both Firefox and IE

Deathshadow: Thanks for all the feedback, that's a lot to digest all at once so it may take a little before I implement everything you suggest, you're absolutely right though... Please be patient with me since I'm learning everything as I go