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 に答える