I've been working on a new layout for my site and just decided to do drop downs. ** I didn't know until today that IE7 natively supports the :hover pseudo class on the LI element. That's pretty cool.

Anyway... IE7: When you hover over the top tab (Residential), you will notice that the dropdown apppears. It is in the proper position however I can't seem to get rid of the margin on the left where the red background is still showing.

FF2: When you hver over the same tab, it appears as I intended but it disappears when you try to go to a sub-tab.

Can anyone see what I have done wrong here?

http://www.mysamplesite.info

Here is the relevant CSS:

/**********************************************************************/
/****     menu-left    ************************************************/
/**********************************************************************/
#menu-container {
   float: left;
   width: 200px;
   z-index: 5;
}

#menu-left {
   width: 200px;
   padding: 0;
   margin: 153px 0 0 0;
   list-style: none inside none;
}

#menu-left li {
   position: relative;
   background: #848484;
   margin-left: 10px;
   margin-bottom: .2em;
   height: 53px;
   border-top: 1px solid #bdbdbd;
   border-bottom: 1px solid #484848;
   border-left: 1px solid transparent;
}

#menu-left li img {
   position: absolute;
   left: -5px;
   top: -1px;
}

#menu-left li a:link, #menu-left li a:visited {
   display: block;
   width: 90%;
   height: 38px;
   color: white;
   font-family: "Myriad Pro SemiCond", "Myriad Pro", Verdana, "Bitstream Vera Sans";
   font-size: 19px;
   text-decoration: none;
   padding-left: 10%;
   padding-top: 15px;
}

#menu-left li a:hover {
   color: black;
}

#menu-left li ul {
   display: none;
   position: absolute;
   right: -200px;
   top: 0px;
   background: red;
   width: 200px;
   height: 100px;
   list-style: none inside none;
   margin: 0;
   padding: 0;
   z-index: 20;
}

#menu-left li:hover ul {
   display: inline;
}

#menu-left li ul li {
   padding: 0;
   margin: 0;
}

The Firefox problem appears to be you <div class="shadow"></div> getting in the way of the left hand menu.

The IE problem might be down to default browser styling. Make sure all padding and margins are removed from your ul's and li's.

Hope this helps!

The Firefox problem appears to be you <div class="shadow"></div> getting in the way of the left hand menu.

I agree, that's exactly what I'm seeing too. I suggest you use a background on the <li> or the <a> that will be the entire button, shadow and all.

IE6 isn't even showing that shadow div.

By the way.. did you mean to have the whole site right-aligned ? That's what I'm seeing in FF3.