下拉菜單重疊我的導航欄

我正在建立一個客戶端的網站，我無法讓下拉菜單在導航欄下方顯示清晰 - 而是重疊導航欄，如果我增加下拉菜單的上邊距將其推到導航欄下方的下拉菜單項和父項列表項之間存在間隙，而懸停屬性使其顯示不起作用。下拉菜單重疊我的導航欄

我已經在這裏創造了導航欄的小提琴 - http://jsfiddle.net/s4dpby4v/1/

可以看到這裏的現場版 - http://japesfawcett.com/ps/index.html

HTML：

<div class="header"> 
    <div class="logo"> 
     <h1><a href="index.html">PAM SHAW INTERIORS</a></h1> 
    </div> 
    <nav> 
     <ul> 
     <li><a href="about.html">ABOUT</a></li> 
     <li class="has-drop"> 
      <a href="#">WORK +</a> 
      <ul class="drop-down"> 
       <li style="padding-bottom: 0;"><a href="#">COMMERCIAL</a></li> 
       <li style="padding-right: 80px; padding-bottom: 0;"><a href="#">RESIDENTIAL</a></li> 
      </ul> 
     </li> 
     <li><a href="portfolio.html">CONTACT</a></li> 
     </ul> 
    </nav> 
</div>

CSS：

.header { 
    width: 100%; 
    background-color: #fff; 
    margin: 0 auto; 
    height: 75px; 
    z-index: 9999; 
} 

.logo h1 { 
    float: left; 
    font-size: 20px; 
    letter-spacing: 4px; 
    width: 25%; 
    padding-top: 10px; 
    margin-top: 18px; 
    margin-left: 75px; 
    font-weight: 300; 
} 

.logo a { 
    text-decoration: none; 
    color: #000; 
} 

nav { 
    font-family: 'Lato', sans-serif; 
    width: 60%; 
    font-size: 14px; 
    font-weight: 300; 
    text-align: right; 
    letter-spacing: 4px; 
    float: right; 
    margin-top: 19px; 
    margin-right: 75px; 
} 

nav ul { 
    float: right; 
    list-style: none; 
    padding-top: -5px; 
} 

nav li { 
    padding-left: 15px; 
    padding-right: 10px; 
    padding-bottom: 15px; 
    display: inline-block; 
} 

nav ul li ul.drop-down { 
    width: 100%; 
    background: #fff; 
    display: none; 
    position: absolute; 
    z-index: 999; 
    padding: 5px 0 5px 0; 
    margin: 15px 0 0 0; 
    left: 0; 
    line-height: 2.5; 
    clear: both; 
    border-top: 1px solid #F1F1F1; 
} 

nav li:hover ul.drop-down { 
    display: block; 
} 

nav ul li ul.dropdown li { 
    display: block; 
    padding: 0; 
    margin: 0; 
} 

nav li a { 
    text-decoration: none; 
    color: #000; 
    display: inline-block; 
} 

nav li a:hover { 
    text-decoration: none; 
    color: #CCC; 
    -webkit-transition: all 800ms ease; 
    -moz-transition: all 800ms ease; 
    -ms-transition: all 800ms ease; 
    -o-transition: all 800ms ease; 
    transition: all 800ms ease; 
}

任何指導或幫助將大大升值ated！

來源

2015-10-29 dash167

的原因是你'位置：absolute'爲'.drop-down'類。它必須是「相對的」。 – divy3993

啊，太好了！這非常感謝！唯一的問題是，現在懸停它推動左列表項 - 任何想法？ – dash167

.has-drop {position: relative;} 
nav ul li ul.drop-down {width: auto;} 
nav li li {width: 100%; text-align: center; box-sizing: border-box;}

會收拾你降了下來，你只需要刪除您對這裏的內聯樣式來修復列表樣式：

檢查

<li style="padding-bottom: 0;"><a href="#">COMMERCIAL</a></li> 
<li style="padding-right: 80px; padding-bottom: 0;"><a href="#">RESIDENTIAL</a></li>

這裏是我的小提琴：http://jsfiddle.net/s4dpby4v/6/

來源

2015-10-29 11:11:15

這很棒 - 謝謝！我想讓下拉菜單具有全寬效果，但我認爲這將是一個更安全的選擇！ – dash167

你可以用這個CSS

.has-drop { 
    padding-bottom: 30px; 
} 
nav ul li ul.drop-down 
{ 
    margin: 27px 0 0; 
}

來源

2015-10-29 10:58:54 Allen

下拉菜單重疊我的導航欄

回答

相關問題