IE Menu Problem

[MalCarne]

I've been building a dropdown menu using the suckerfish example. Everything was fine until the client wanted the menu moved. Now, due to positioning, the dropdown doesn't display vertically in IE. It works fine in firefox, and a shorter menu works fine. I've tried just about everything that I can think of.
Page is here [URL unfurl="true"]http://www.resourceinc.com/stratton/default.aspx [/url]
CSS:

.header
{
    top:0px;
    background-image:url(images/stratton-logo.gif);
    background-repeat:no-repeat;
    height:180px;
    font-size:larger;
    font-weight:bolder;
    color:#000;
        }
.nav
{
position:absolute;
left:364px!important;
left:366px;
top:60px!important;
top:67px;
height:90px;
margin-bottom: 25px;
margin-left:0px;
color:#929091;
vertical-align:middle;
font-size: medium;
z-index:2;
}

.nav ul {
  padding: 0;
  margin:0;
  list-style: none;
  }
.nav li {
  float: left;
  position: relative;
  background-color:#0072BA;
  padding-top:5px;
  padding-bottom:5px;
  }
.nav li ul {
  display: none;
  margin-top:4px;
  position: absolute; 
  left: 0;
  background-color:#0072BA;
  
  }
.nav li > ul {
	top: auto;
	left: auto;
	}
.nav li ul li
{color:#FFFDE0;
    border-right:none 0px;
    margin-top:5px;
    z-index:30;
    width:inherit;
}
.nav li:hover ul, .nav li.over ul 
{display: block; 
}
.nav a {
    display:block;
    padding:5px 15px;
    color:#231F20;
    font-size:smaller;
    font-weight:700;
    text-decoration:none;
    }

HTML:

    <div class="header">
    </div>
    <div class="nav">
       
        <ul id="nav">
            <li><a href="#">Home</a></li>
            <li><a href="#">Services</a>
                <ul>
                    <li><a href="#">Business Transactions</a></li>
                    <li><a href="#">Corporate &amp; Business</a></li>
                    <li><a href="#">Estate Planning</a></li>
                    <li><a href="#">Real Estate</a></li>
                </ul>
            </li>
            <li><a href="#">News and Links</a></li>
            <li><a href="#">Client Login</a></li>
            <li><a href="#">Contact/Visit</a>
                <ul>
                    <li><a href="#">Contact Information</a></li>
                    <li><a href="#">Driving Directions</a></li>
                </ul>
            </li>
        </ul>
    </div>

Thanks in advance for any input.

 

[Vragabond]

Sorry, but I am getting somewhat identical results in Mozilla and IE and I can't see any vertical menus. Could you please explain in more detail what you're expecting and what you're getting?

 

[MalCarne]

Under the "services" and "contact/visit" tabs there are drop down lists. In Firefox, they are displaying properly. But in IE, expand to the right and wrap. I'm trying to get the lists to expand vertically in IE, as they do in Firefox.

Thanks.

 

[Vragabond]

Yours is an interesting problem and I am unsure if FF or IE/Mozilla are more correct in the interpretation of it. So let's review.

1. You float all your links, so you basically want them to stack up horizontally.
2. You specify the width of the inner list item as 'inherit'. Inherit from what? You have not set a single width before, so all browsers have to go on is whatever width they rendered the parent element: FF believes the width is then the width of the parent li element. IE and Mozilla figure since there's no width specified, default value should be used, which is auto, making the menu expand horizontally.

What to do? I would defloat second level links and I would specify some widths for the dropdown. Suckerfish does it, so why not yours?

 

[MalCarne]

Width:inheirit" was a futile attempt that I neglected to take out before posting.
Setting the width in .nav li ul did the trick. I guess it was the only place that I didn't try that. Thanks for the help.