下拉菜單錯誤

請考慮本網站：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>

來源

2012-04-23 user762247

如果你可以提取相關的代碼，並把它放在http://jsfiddle.net你會得到更多的人願意幫助你 – ChrisW 2012-04-23 12:55:57

告訴我們你的代碼。 – buymypies 2012-04-23 12:56:15

撥弄相關代碼：http://jsfiddle.net/QHaS9/ – 2012-04-23 13:04:51

刪除溢出：隱藏從.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-23 12:58:46 sandeep

如果有幫助，接受＆upvote致謝:) – sandeep 2012-04-23 13:09:51

您有需要解決的問題，首先你的子菜單是從你的菜單項加載遠一些問題，我建議你把它並排的父菜單項，如下所示：

#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; 
}

而且也，你通過使用屬性overflow:hidden隱藏你的.left-section裏面的子菜單，刪除，它將全面展示。

演示：http://jsfiddle.net/QHaS9/1/

來源

2012-04-23 13:01:31

下拉菜單錯誤

回答

相關問題