CSS drop down menu positioning in IE7 [closed] - css-position

Question

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
I have a CSS only drop down menu that works fine in firefox and chrome. The sub menus line up directly underneath their parents. However, in IE7, they are positioned off to the side.
CSS:
/* MENU LEVEL 1 */
#nav-img { padding-top: 4px; }
#main-nav {
height: 30px; /* set to the height you want your menu to be */
margin: 0 0 10px; /* just to give some spacing */
width: 600px;
display: inline-block;
font-family: Tahoma, Geneva, sans-serif;
font-size: 10pt;
text-transform: uppercase;
}
#main-nav ul {
margin: 0; padding: 0; /* only needed if you have not done a CSS reset */
}
#main-nav li {
display: block;
border: 1px solid #000;
float: left;
line-height: 30px; /* this should be the same as your #main-nav height */
height: 30px; /* this should be the same as your #main-nav height */
margin: 0; padding: 0; /* only needed if you don't have a reset */
position: relative; /* this is needed in order to position sub menus */
}
#main-nav li a {
display: block;
height: 30px;
line-height: 30px;
padding: 0 15px;
}
#main-nav .current-menu-item a, #main-nav .current_page_item a, #main-nav a:hover {
color: #000;
}
/* MENU LEVEL 2 */
.sub-menu {
text-transform: none;
}
#main-nav ul ul { /* this targets all sub menus */
display: none; /* hide all sub menus from view */
position: absolute;
top: 30px; /* this should be the same height as the top level menu -- height + padding + borders */
}
#main-nav ul ul li { /* this targets all submenu items */
float: none; /* overwriting our float up above */
width: 240px; /* set to the width you want your sub menus to be. This needs to match the value we set below */
}
#main-nav ul ul li a { /* target all sub menu item links */
padding: 5px 10px; /* give our sub menu links a nice button feel */
}
#main-nav ul li:hover > ul {
display: block; /* show sub menus when hovering over a parent */
}
HTML:
<div id="main-nav">
<ul>
<li>Home</li>
<li>Services <br />
<ul class="sub-menu">
<li>Commodities</li>
<li>Professional Practice</li>
<li>Shipping</li>
<li>Commercial</li>
<li>Corporate Structure</li>
<li>Dispute Resolution and Arbitration</li>
<li>International Employment</li>
<li>Financial Re-structuring</li>
<li>Intellectual Property</li>
</ul>
</li>
<li>Team</li>
<li>News</li>
<li>Testimonials</li>
<li>Contact</li>
</ul>
Any help would be much appreciated.

Answer 1

Try this;
#main-nav ul ul {
display: none; /* hide all sub menus from view */
position: absolute;
top: 30px; /* this should be the same height as the top level menu -- height + padding borders */
left: 0;
}
IE7 needs a left value.