PDA

View Full Version : 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/dynamicindex1/dropmenuindex.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
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:


#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 :-)