0

このウェブサイトをご検討ください: http://indivar.biz/test/balkar/ . 「住宅プロジェクト」タブにサブメニュードロップダウンを作成しましたが、ナビゲーションタブ「住宅プロジェクト」にカーソルを合わせると、ナビゲーションの灰色の領域内にサブドロップダウンメニューが表示されますが、灰色の領域の外側に表示したいです。コンテンツ幅いっぱいのナビゲーション。

関連するコードは次のとおりです。

CSS

.left-section {
    float: left;
    overflow: hidden;
    width: 220px;
}

#nav {
    background: none repeat scroll 0 0 #E4E4E4;
    position: relative;
    z-index: 9999;
}
#nav ul {
    margin: 0 auto;
    padding: 6.5px 0;
    width: 197px;
}
#nav ul li {
    background: url("../images/nav-line-bottom.jpg") repeat-x scroll center bottom transparent;
    height: 29px;
    line-height: 34px;
}
#nav ul li a {
    color: #242121;
    display: block;
    font-size: 15px;
    height: 30px;
    line-height: 23px;
    margin-top: 5px;
    text-decoration: none;
}
#nav ul li a.home {
    background: url("../images/nav-icons.png") no-repeat scroll 0 0 transparent;
    padding-left: 32px;
}
#nav ul li a.about {
    background: url("../images/nav-icons.png") no-repeat scroll 0 -32px transparent;
    padding-left: 32px;
}
#nav ul li a.services {
    background: url("../images/nav-icons.png") no-repeat scroll 0 -63px transparent;
    padding-left: 32px;
}
#nav ul li a.resi-proj {
    background: url("../images/nav-icons.png") no-repeat scroll 0 -96px transparent;
    padding-left: 32px;
}
#nav ul li a.comm-proj {
    background: url("../images/nav-icons.png") no-repeat scroll 0 -130px transparent;
    padding-left: 32px;
}
#nav ul li a.career {
    background: url("../images/nav-icons.png") no-repeat scroll 0 -161px transparent;
    padding-left: 32px;
}
#nav ul li a.faq {
    background: url("../images/nav-icons.png") no-repeat scroll 0 -195px transparent;
    padding-left: 32px;
}
#nav ul li a.nri {
    background: url("../images/nav-icons.png") no-repeat scroll 0 -228px transparent;
    padding-left: 32px;
}
#nav ul li a.cont {
    background: url("../images/nav-icons.png") no-repeat scroll 0 -262px transparent;
    padding-left: 32px;
}
#nav ul li ul {
    background: none repeat scroll 0 0 #CC0000;
    display: none;
    left: 150px;
    position: absolute;
    top: 135px;
    width: 220px;
    z-index: 9999;
}
#nav ul li:hover ul {
    display: block;
}
#nav ul li ul li a {
    color: #FFFFFF;
    display: block;
}

HTML

<div class="left-section">
      <!--logo div ends-->
      <div class="clear"></div>
      <div class="margin-top" id="nav">
        <ul>
          <li><a class="home" href="#">Home</a></li>
          <li><a class="about" href="#">About Us</a></li>
          <li><a class="services" href="#">Our Services</a></li>
          <li><a class="resi-proj" href="#">Residential Projects</a>
              <ul>
                <li><a href="#">All</a></li>
                <li><a href="#">Apartments</a></li>
                <li><a href="#">Floors</a></li>
                <li><a href="#">Plots</a></li>
                <li><a href="#">Villas</a></li>
            </ul>

          </li>
          <li><a class="comm-proj" href="#">Commercial Projects</a></li>
          <li><a class="career" href="#">Career</a></li>
          <li><a class="faq" href="#">FAQ's</a></li>
          <li><a class="nri" href="#">NRI Club</a></li>
          <li style="background: none repeat scroll 0% 0% transparent;"><a class="cont" href="#">Contact Us</a></li>
        </ul>
      </div>

    </div>
4

2 に答える 2

1

Overflow:hidden.left-sectionをDIVから削除します。次のように書きます。

.left-section {
    float: left;
    width: 220px;
}

#nav ul li ul {
    background: none repeat scroll 0 0 #CC0000;
    display: none;
    left: 220px;
    position: absolute;
    top: 135px;
    width: 220px;
    z-index: 9999;
}
于 2012-04-23T12:58:46.723 に答える
0

対処する必要があるいくつかの問題があります。まず、サブメニューがメニュー項目から遠く離れて読み込まれます。次のように、親メニュー項目を並べて配置することをお勧めします。

#nav ul li  {
    position:relative;
}

#nav ul li ul {
    background: none repeat scroll 0 0 #CC0000;
    display: none;
    left: 100%; /* change here */
    position: absolute;
    top: 0; /* change here */
    width: 220px;
    z-index: 9999;
}

また.left-section、プロパティを使用して内部にサブメニューを隠している場合はoverflow:hidden、それを削除すると完全に表示されます。

デモ: http://jsfiddle.net/QHaS9/1/

于 2012-04-23T13:01:31.267 に答える