dropdown menu shifts page down on rollover

**jfrk7** · 01-28-2008, 08:54 PM

1) Script Title: AnyLink Drop Down Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...pmenuindex.htm

3) Describe problem: My menu is placed inside a table cell that is in a table that is centered on a page --not using absolute positioning). When I set the menu link at absolute, the rollover works perfectly. however, the absolute position of the link (not the dropdown) is not the same on every computer screen. When I set the menu links to relative so that it fits exactly in the table cell, the dropdown menu shifts the whole page down upon rollover.

This is what it looks like with absolute positioning: http://www.dsni.org/index.shtml

With relative positioning: http://www.dsni.org/index2.shtml

Thank you so much for all your help and sorry if the code is messy.

**ddadmin** · 01-29-2008, 11:18 AM

The drop down div needs to have a position of absolute. Is there a reason why you've changed it to relative? The anchor links themselves can be relatively positioned, but that's different.

**jfrk7** · 01-29-2008, 04:39 PM

Oh, i didn't know that was what the problem was. Such a little thing. I changed it and now the page doesn't shift down everytime. But now the menu items in the drop down menu are all stacked on top of each other. Basically, the block attribute isn't working anymore even though it was fine before. In the first menu item there should be more than 5 drop down items but right now you can only see one...if you look at the 5th menu item you can see how they're all on top of each other...Thanks again for your help!

**jfrk7** · 01-29-2008, 04:40 PM

Originally Posted by jfrk7

Oh, i didn't know that was what the problem was. Such a little thing. I changed it and now the page doesn't shift down everytime. But now the menu items in the drop down menu are all stacked on top of each other. Basically, the block attribute isn't working anymore even though it was fine before. In the first menu item there should be more than 5 drop down items but right now you can only see one...if you look at the 5th menu item you can see how they're all on top of each other...Thanks again for your help!

Oh and also the code to look at now is http://www.dsni.org/index.shtml

**ddadmin** · 01-30-2008, 03:18 PM

Actually, you didn't fix the position problem. The absolute declaration needs to be added to #dropdowndiv itself, not #dropdowndiv a. So:

Code:

#dropmenudiv{
position:absolute;
background-color: none;
font: 12pt Arial, helvetica, sans-serif;
font-weight:bold;
line-height:18px;
z-index:100;
}

#dropmenudiv a{
position: absolute;
left:10px;
display: block;
text-indent: 0px;
border: 1px solid gray;
padding: 2px;
text-decoration: none;
font-weight: bold;
background-color: #0062AF;
color:#ECF9FF;
width:200px;
}

The code in red is new, while the code is gray should be removed from your existing page.

Also, inside your page's HTML (everything after the <body> tag). your menu items each carry the id="dropmenudiv" attribute. This needs to be removed, as 1) That ID value is reserved for the script's drop down menu itself, and 2) The ID attribute in CSS needs to be unique value wise.

**jfrk7** · 01-30-2008, 07:49 PM

Thank you so much! Everything works perfectly now :-)

Thread: dropdown menu shifts page down on rollover

Thread Tools

Search Thread

dropdown menu shifts page down on rollover

Bookmarks

Bookmarks

Posting Permissions