CSS Horizontal Nav Menu with multi-level nested lists moves body contents when displayed
Posted on 2009-12-28
I am a beginner when it comes to web page design. I have been toying around with redesigning our intranet page, as it has been maintained using Microsoft Word since before I worked with this employer, and I felt it could use a refresh. This is not an assigned task, it is mainly for hobby.
I have been reviewing documentation on web design using CSS and feel I have a decent handle on it, but it is nowhere near being an intermediate or pro level.
I am trying to create a horizontal nav menu that has a vertical drop-down for the first sub menu, then each menu from that first sub menu is a vertical drop-down off to the side of its parent listing. Basically in the sample below when I hover on "Menu Item 3" the "Sub Menu" items appear. When I hover on each "Sub Menu" item, I see their respective "Child" menu items.
It is a 3-level unordered list I have styled with CSS.
| Menu Item 1 | | Menu Item 2 | | Menu Item 3 |
| Sub Menu Item 1 | | Child of Item 1 |
| Sub Menu Item 2 | | Child of Item 1 |
| Child of Item 1 |
My problem is that when I hover over | Menu Item 3 | I see the "Sub Menu"items just fine, however they move my <body> data around and messing it up. The "Child" menu items appear over the top of the <body> items, which is what I want. I want the "Sub Menu" items to appear over the <body> data as well, but I am not sure what is causing the problem. I currently have the list data that comprises the nav menu in the <head> section of the page. I then display it on each page of the site using a .dwt file.
You can see what I have so far by going to intranet.thekitcheninc.org.
I know I must be messing up something simple but it is escaping me. I would appreciate any help and pointers that you could offer.