We help IT Professionals succeed at work.
Get Started

CSS Sub-Menu Positioning

bmw040
bmw040 asked
on
522 Views
Last Modified: 2012-08-13
The website I am working on is at:

http://mccormickscchamber.com/navigation20.php?silverheader=2

I am trying to position the long sub menus to align to the top of “The Chamber” image.

For example, the services submenu is currently set to (top:0;):

.suckerdiv ul li{
position: relative;
}

/*Sub level menu items */
.suckerdiv ul li ul{
position: absolute;
width: 170px; /*sub menu width*/
top: 0;
visibility: hidden;
}

If I change it to; bottom:0; then the submenu moves up (the last submenu item is aligned with services). However, now it is too high.

I played with everything I could think of and just screwed it up every time it is changed.

Thanks in advance expertd!
.suckerdiv ul{
margin: 0;
padding: 0;
list-style-type: none;
width: 250px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}

.suckerdiv ul li{
position: relative;
}

/*Sub level menu items */
.suckerdiv ul li ul{
position: absolute;
width: 170px; /*sub menu width*/
top: 0;
visibility: hidden;
}

/* Sub level menu links style */
.suckerdiv ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: black;
text-decoration: none;
background: #fff;
padding: 1px 5px;
border: 1px solid #ccc;
border-bottom: 0;
}

.suckerdiv ul li a:visited{
color: black;
}

.suckerdiv ul li a:hover{
	background-color: #d1e2d1;
}

.suckerdiv .subfolderstyle{
background: url(media/arrow-list.gif) no-repeat center right;
}


/* Holly Hack for IE \*/
* html .suckerdiv ul li { float: left; height: 1%; }
* html .suckerdiv ul li a { height: 1%; }


HTML:

<div id="sideNav">
  <div id="sideNavWrapper">
    <div class="applemenu">
      <div class="suckerdiv">

        <div class="silverheader"><a href="#">The Chamber</a></div>
          <div class="submenu">
			<?php include_once "/home2/mccormi9/public_html/_includes/navArea01.php"; ?>
		  </div><!--end submenu-->     

        <div class="silverheader"><a href="#">County Information</a></div>
          <div class="submenu">
			<?php include_once "/home2/mccormi9/public_html/_includes/navArea02.php"; ?>
  		  </div><!--end submenu-->   
          
        <div class="silverheader"><a href="#">County Lifestyle</a></div>
          <div class="submenu">

            <ul class="suckertree3">
              <li><a href="#">Art</a></li>
              <li><a href="#">Attractions</a></li>
              <li><a href="#">Civic Organizations</a>          
                <ul>
                  <li><a href="#">Clubs</a></li>
                  <li><a href="#">Churches</a></li>   
                </ul>
              </li>
              <li><a href="#">Dining</a></li>
              <li><a href="#">Historic Places</a></li>
              <li><a href="#">Lodging</a></li>
              <li><a href="#">Shopping</a>          
                <ul>
                  <li><a href="#">Antiques</a></li>
                  <li><a href="#">Retail</a></li>   
                </ul>
              </li>
              <li><a href="#">Outdoor Recreation</a>
                <ul>
                  <li><a href="#">Biking</a></li>
                  <li><a href="#">Camping</a></li>   
                  <li><a href="#">Fishing</a></li>    
                  <li><a href="#">Golf</a></li>
                  <li><a href="#">Hiking Trails</a></li>   
                  <li><a href="#">Hunting/Hunt Camps</a></li> 
                  <li><a href="#">Lakes-Marinas/Boating</a></li>
                  <li><a href="#">State Parks</a></li>
                </ul>
              </li>
              <li><a href="#">Services</a>
                <ul>
                  <li><a href="#">Attornies</a></li>
                  <li><a href="#">Automotive</a></li>   
                  <li><a href="#">Builders</a></li>    
                  <li><a href="#">Building Repairs</a></li>
                  <li><a href="#">Financial</a></li>   
                  <li><a href="#">Insurance</a></li> 
                  <li><a href="#">Industrial</a></li>
                  <li><a href="#">Medical</a></li>
                  <li><a href="#">Real Estate</a></li>
                  <li><a href="#">Schools</a></li>   
                  <li><a href="#">Manufacturing</a></li>    
                  <li><a href="#">Utilities</a></li>
                  <li><a href="#">Other</a></li>   
                  <li><a href="#">Hunting/Hunt Camps</a></li>
              </ul><!--end services-->
            </li><!--end services-->
            </ul><!--end sukertree2-->


		  </div><!--end submenu-->
      </div><!--end sukerdiv-->
    </div><!--end applemenu-->
  </div><!--end sideNavWrapper-->
</div><!--end sideNav-->

Open in new window

Comment
Watch Question
Commented:
This problem has been solved!
Unlock 1 Answer and 1 Comment.
See Answer
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE