Question

我有一个仅限CSS的下拉菜单，可以在firefox和chrome中正常工作。子菜单直接排在父母的下方。但是，在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>

非常感谢任何帮助。

Answer 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需要左值。

CSS下拉菜单定位在IE7中

1 个答案: