To fix your particular problem: 1. Remove the height: 100% from the <a> tag. 2. Add position:relative to the <dl> tag. 3. Add position: absolute and left: 0 to your <dd> tag 4. add top: Xpx to your <dd> tag where X = the height of the <dt> element.
The reason the hover state pushes the table down is because the sub menu needed to be absolute positioned. Because the element is set to block but not absolute positioned, it still takes up space on the page. However, because you are absolute positioning the sub menu, you need to create a bounding box that the sub menu will be contained within. By setting position relative to the <dl> tag, the left: 0, and top: 0 location of the submenu will be the top-left corner of the <dl> tag that contains the submenu. Lastly, you need to set top: Xpx so that the sub menu does not sit on top of the <dt> tag that triggers the hover effect. Hope this helps! On Dec 2, 2:21 am, jer <[EMAIL PROTECTED]> wrote: > I am trying to create a really simple drop down menu using some > scripts I found on the Net. As I started to tweak it, I noticed that > after I hover over a menu item and a sub menu drops down, it either > expands the table in which the menu resides or it pushes the table > below it further down. > > I'm pretty new at CSS so any help to get the menu to appear on top of > the tables would be appreciated. I thought the z-Order would control > this, but I had no luck by setting it to 1. The samples have all the > source in the single web page. > > http://www13.brinkster.com/jarnson/MySamples/Menu1.htm > > http://www13.brinkster.com/jarnson/MySamples/menu2.htm --~--~---------~--~----~------------~-------~--~----~ -- You received this because you are subscribed to the "Design the Web with CSS" at Google groups. To post: [email protected] To unsubscribe: [EMAIL PROTECTED] -~----------~----~----~----~------~----~------~--~---
