下拉菜单与我的导航栏重叠

Question

我正在为客户构建网站，但我无法让下拉菜单清晰显示在导航栏下方 - 相反，它与导航栏重叠，如果我增加下拉菜单的上边距将其推到导航栏下方的菜单在下拉菜单和父列表项之间存在间隙，悬停属性使其显示不生效。

我在这里创建了一个 fiddle 导航栏 - 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;
}

任何指导或帮助将不胜感激！

Answer 1

你可以检查这个css

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

Answer 2

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

这是我的fiddle：http://jsfiddle.net/s4dpby4v/6/

下拉菜单与我的导航栏重叠

Drop Down Menu is Overlapping my Nav Bar

html

css

navigation

drop-down-menu