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

从您的DIV 中删除溢出：隐藏。.left-section像这样写：

.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 回答