-2

我有一个仅适用于 Firefox 和 chrome 的 CSS 下拉菜单。子菜单在其父菜单的正下方排列。但是，在 IE7 中，它们被放置在一边。

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><a href="a href="#"">Home</a></li>
<li><a href="a href="#"">Services</a> <br />
    <ul class="sub-menu">
    <li><a href="#">Commodities</a></li>
    <li><a href="#">Professional Practice</a></li>
    <li><a href="#">Shipping</a></li>
    <li><a href="#">Commercial</a></li>
    <li><a href="#">Corporate Structure</a></li>
    <li><a href="#">Dispute Resolution and Arbitration</a></li>
    <li><a href="#">International Employment</a></li>
    <li><a href="#">Financial Re-structuring</a></li>
    <li><a href="#">Intellectual Property</a></li>
    </ul>
</li>
<li><a href="#">Team</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">Contact</a></li>
</ul>

任何帮助将非常感激。

4

1 回答 1

1

尝试这个;

#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 需要一个左值。

于 2013-05-18T15:46:04.490 回答