[英]Drop Down Menu is Overlapping my Nav Bar
I'm building a site for a client and I'm having trouble getting the drop down menu to appear clear below the navbar - instead it is overlapping the navbar, and if I increase the top margin of the drop down menu to push it below the navbar there is a gap between the drop down and the parent list item where the hover property to make it appear does not take affect. 我正在为客户建立一个站点,但我无法使下拉菜单在导航栏下方清晰显示-而是与导航栏重叠,如果我增加了下拉菜单的上边距以将其推到下方导航栏在下拉列表和父列表项之间有一个间隙,使要显示的悬停属性不会受影响。
I've created a fiddle of the navbar here - http://jsfiddle.net/s4dpby4v/1/ 我在这里创建了导航栏的小提琴-http: //jsfiddle.net/s4dpby4v/1/
And you can view the live version here - http://japesfawcett.com/ps/index.html 您可以在此处查看实时版本-http: //japesfawcett.com/ps/index.html
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: 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;
}
Any guidance or help would be greatly appreciated! 任何指导或帮助将不胜感激!
You can check with this css 你可以用这个CSS检查
.has-drop {
padding-bottom: 30px;
}
nav ul li ul.drop-down
{
margin: 27px 0 0;
}
.has-drop {position: relative;}
nav ul li ul.drop-down {width: auto;}
nav li li {width: 100%; text-align: center; box-sizing: border-box;}
Will clean up you drop down, you just need to remove the inline styles that you have on here to fix up the list styles.: 将清理您的下拉列表,您只需要删除此处的内联样式即可修复列表样式。
<li style="padding-bottom: 0;"><a href="#">COMMERCIAL</a></li>
<li style="padding-right: 80px; padding-bottom: 0;"><a href="#">RESIDENTIAL</a></li>
Here is my fiddle: http://jsfiddle.net/s4dpby4v/6/ 这是我的小提琴: http : //jsfiddle.net/s4dpby4v/6/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.