ansaurus

Question

Answer 1

A:

it doesn't take into account the offsetLeft of your #wrap div.

make the change to your cssdropdown file.

cssdropdown.dropit = function(obj, e, dropmenuID){
    if (this.dropmenuobj!=null) //hide previous menu
     this.hidemenu() //hide menu
    this.clearhidemenu()
    this.dropmenuobj=document.getElementById(dropmenuID) //reference drop down menu
    this.asscmenuitem=obj //reference associated menu item
    this.showmenu(this.dropmenuobj, e)
    this.dropmenuobj.x=this.getposOffset(obj, "left")
    this.dropmenuobj.y=this.getposOffset(obj, "top")
        // <<<<<< BEGIN CHANGE (notice the "- document.getElementById('wrap').offsetLeft")
    this.dropmenuobj.style.left=(this.dropmenuobj.x-this.clearbrowseredge(obj, "rightedge")-document.getElementById('wrap').offsetLeft)+"px"
        // <<<<<< END CHANGE
    this.dropmenuobj.style.top=this.dropmenuobj.y-this.clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+1+"px"
    this.positionshim() //call iframe shim function
}

Joshua 2009-08-19 10:27:47

Answer 2

+2 A:

Three things you're doing wrong:

Using absolute positioning without a relative parent
Using Javascript to change the position values
Not really wrong per se, but you lose semantics because the dropdowns are not part of the menu. They're not associated with their parent items.

For #1, you should set the menu (#dropmenu) to position:relative. Then all absolutely positioned children will be positioned relative to the top left of that element. This means you can put top: 0; left: 500px on the drop down* and it will always appear in the same place. (The 500 value is just a guess but since your design is fixed with, it will be a constant value.)

For #2, this means you don't need to use Javascript to reposition the elements, just turn the visibility on and off.

For #3, I would also suggest that you make the dropdowns children of the menu itself, rather than siblings. This is more semantic and screenreaders then know the relationship between the menu items. You could use HTML similar to this:

<ul class="menu-level1">
  <li><a href="">About Us</a></li>
  <li><a href="">Contact Us</a>
    <ul class="menu-level2">
      <li><a href="">Locations</a></li>
      <li><a href="">Register</a></li>
    </ul>
  </li>
  <li><a href="">Case Studies</a></li>
</ul>

You would set position: relative on .menu-level1 and position: absolute on .menu-level2.

DisgruntledGoat 2009-08-19 10:59:18

Answer 3

A:

http://stackoverflow.com/questions/1289842/absolute-positioning-an-element-causes-element-to-display-inline-in-ie/1289863#1289863

Zoidberg 2009-08-19 15:11:33

ansaurus

tags:

views:

answers:

Positioning of my drop-down divs

related questions