View Single Post
  #1 (permalink)  
Old March 7th, 2012, 12:17 PM
JackHerr JackHerr is offline
Authorized User
Points: 108, Level: 2
Points: 108, Level: 2 Points: 108, Level: 2 Points: 108, Level: 2
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Nov 2007
Location: North Salem, NY, USA.
Posts: 23
Thanks: 3
Thanked 0 Times in 0 Posts
Default Absolute Positioning Relative to Relatively Positioned Containing Element

I am having problems doing a drop-down list similar to that in the book's Example 11-1 ("Positioning Sub Navigation", pp. 224-226). Here is my code (basics). I am using <!DOCTYPE html> (namely HTML5).

The absolute element positions itself, with this code, relative to the top right of the overall containing element ("Header Navigation Menu"), not the individual <li> elements. Note also that, for some reason, I have to add an extra 10px to the top displacement in order for it to line up with the bottom of the containing element (30px) for IE9. This compensation puts it 10 px below the bottom of the container for all other browsers. Finally, this code yields no sub menu in IE6 (Expression Web 4 SuperPreview), which I think is because I have not yet done an IE6 fix with hasLayout or z-index, which I will have to research but can eventually figure out.

Thanks for any help you can give me.

HTML:

Code:
<div id="HeaderNavigationSection">
    <ul id="HeaderNavigationMenu">
     <li class="BlockMenuItem"><a href="#">Welcome, Guest (Log In or Register)</a></li>
     <li class="BlockMenuItem"><a href="#">Shopping Cart</a></li>
     <li class="BlockMenuItem"><a href="#">My Account</a></li>
     <li class="BlockMenuItem"><a href="#">Order Status</a></li>
     <li class="BlockMenuItem">
      <a href="#">Administrative Access</a>
      <ul id="AdministrativeAccessMenu">
       <li><a href="#">Stores</a></li>
       <li><a href="#">Affiliates</a></li>
       <li><a href="#">Individuals</a></li>
       <li><a href="#">Company</a></li>
      </ul>
     </li>
     <li class="BlockMenuItem"><a href="#">Test Menu Item</a></li>
    </ul>
   </div>
Code:
#HeaderNavigationSection {
background-color: #D4D4D4;
height: 30px;
}
#HeaderNavigationMenu {
float: right;
}
#HeaderNavigationMenuli {
position: relative;
display: inline;
}
#HeaderNavigationMenulia {
margin-top: 8px;
padding: 0px 10px 0px 10px;
border-left-width: 1px;
border-style: dotted;
border-color: #808080;
text-decoration: none;
float: left;
}
#HeaderNavigationMenuli:first-childa {
border: none;
}
#HeaderNavigationMenulia:hover {
color: #003366
}
#HeaderNavigationMenuliul {
position: absolute;
float: left;
top: 40px;
right: 0px;
background-color: #FFFFFF;
padding-bottom: 10px;
border: 1px black solid;
}
#HeaderNavigationMenuliula {
display: block;
border: none;
}