1

我试图找到我的问题的答案，虽然有类似的问题，但没有什么能像我一样跳出来解决我的问题。

我正在使用 CSS 添加一个子菜单，由于某种原因，水平子菜单只会显示在正文之外。你可以在这里看到一个例子http://jsfiddle.net/sxP94/22/。

我需要让子菜单出现在菜单上的投资组合下方。如果有人能帮我弄清楚为什么会这样，我将不胜感激。

这是代码：

CSS

body {
margin:0;
padding:0;
width:100%;
color:#929292;
font:normal 12px/1.5em "Liberation sans", Arial, Helvetica, sans-serif;
}
html, .main {
padding:0;
margin:0;
} 
.main {
background:#f8f8f8;
}

a {
color:#0087c7;
text-decoration:underline;
}
.header, .content, .menu_nav, .fbg, .footer, form, ol, ol li, ul, .content .mainbar, .content .sidebar {
margin:0;
padding:0;
}
.header {
}
.header_resize {
margin:0 auto;
padding:0;
width:960px;
}

h1 a, h1 a:hover {
color:#000;
text-decoration:none;
}
h1 span {
}

.menu_nav {
margin:0 auto;
padding:70px 0 0;
height:15px;
float:right;
}
.menu_nav ul {
list-style:none;
padding:0 0 0 1px;
height:15px;
float:left;
background:url(../images/menu_split.gif) no-repeat left center;
}
.menu_nav ul li:first-child {
margin:0;
}
.menu_nav ul li {
margin:0;
padding:0 20px;
float:left;
background:url(../images/menu_split.gif) no-repeat right center;
}
.menu_nav ul li a {
display:block;
margin:0;
padding:0;
font-size:15px;
line-height:18px;
font-weight:bold;
color:#c4c4c4;
text-decoration:none;
text-transform:uppercase;
}
.menu_nav ul li.active a, .menu_nav ul li a:hover {
text-decoration:none;
color:#000;
}
.menu_nav > ul > li > ul {
height:1000px;
left:-99999px;
overflow:visible;
position:absolute;
top:37px;
width:115px;
float: left;

}
.menu_nav > ul > li:hover ul {
left:0;
top:37px;
}
.menu_nav > ul > li > ul > li {
background:none #343434;
border:1px solid #4f4f4f;
float:none;
height:29px;
margin:-1px 0 0;
padding:0 12px;
position:relative;
width:auto;
z-index:1000;
}
.menu_nav ul li ul li a {
color:#ffffff!important;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
line-height:28px;
text-transform:none;

}
.menu_nav ul li ul li.active a, .menu_nav ul li ul li a:hover {
color:#fff!important;
}

HTML

<body>
<div class="main">
<div class="header">
<div class="header_resize">
  <div class="menu_nav">
    <ul>
      <li class="active"><a href="index.html"><span>Home</span></a></li>
      <li><a href="about.html"><span>About</span></a></li>
      <li><a href="services.html"><span>Services</span></a></li>
      <li><a href="portfolio.html"><span>Portfolio</span></a>
            <ul>
        <li><a href="boudoir.html">Boudoir</a></li>
        <li><a href="babies.html">Babies</a></li>
        <li><a href="engagement.html">Engagement</a></li>
        <li><a href="wedding.html">Wedding</a></li>
        <li><a href="lifestyle.html">Lifestyle</a></li>
        <li><a href="family.html">Family</a></li>
        <li><a href="grad.html">Grads</a></li>
        </ul>
        </li>
      <li><a href="blog.html"><span>Blog</span></a></li>
      <li><a href="contact.html"><span>Contact</span></a></li>
    </ul>
  </div>
</div>
</div>
</div>

每当我更改任何左侧数字时，子菜单都会完全停止显示。当我将鼠标悬停在菜单上时，甚至不会出现在身体外部。所以我不知道如何移动它，因为我尝试的任何东西都会让它完全消失。感谢您抽出宝贵时间阅读本文，并提前感谢您提供的任何帮助。

4

1 回答 1

3

给position: relative子菜单的父级。给出了子菜单position:absolute，因此出现在外面。

.menu_nav ul li {
 position: relative;
}
于 2013-04-17T18:25:34.120 回答