html - 导航菜单中的下拉菜单未完全显示并在悬停时消失

Question

我在导航菜单中悬停时有一个下拉菜单，它以一种奇怪的方式切断了它的元素并且显示不正确。此外，当我尝试将指针移动到下拉菜单时，它也会消失一半。

这是一个 fiddle - https://jsfiddle.net/AwesomeHat/vfaqbu03/

    <header>
<!--Navigation Bar-->
<nav>
<ul class="navbar">
<li class="list"><a href="#" class="navlink">Contact</a></li>
<li class="list"><a href="#" class="navlink">Buyers Section</a>
<ul class="hidden">
<li class="listtwo"><a href="#" class="navlinktwo">EMI Calculator </a></li>
<li class="listtwo"><a href="#" class="navlinktwo">Apply For Loan</a></li>
<li class="listtwo"><a href="#" class="navlinktwo">Make An Enquiry</a></li>
</ul>
</li>
<li class="list"><a href="#" class="navlink">Referral</a></li>
<li class="list"><a href="#" class="navlink">What's New</a>
<ul class="hidden">
<li class="listtwo"><a href="#" class="navlinktwo">Just Launched</a></li>
<li class="listtwo" ><a href="#" class="navlinktwo">Launching Soon</a></li>
<li class="listtwo"><a href="#" class="navlinktwo">Completed Projects</a> </li>
</ul>
</li>
<li class="list"><a href="#" class="navlink">About us</a></li>
<li class="list"><a href="#" class="navlink">Home</a></li>
</ul>
</nav>
</header>

header {
background: black;
position: absolute;
width: 100%;
height: 150px;
}
.navbar {
list-style-type: none;
position: relative;
margin-top: 95px;
margin-right: 70px;
z-index: 100;
}
.list {
position: relative;
float: right;
border-right: 2px solid #fff;
padding-left: 10px;
padding-right: 10px;
}
.navlink {
display: inline-block;
font-size: 15px;
font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
color: #fff;
text-decoration: none;
}
.list:hover .navlink  {
color: rgba(165,219,89,1);
}
.list:hover .navlinktwo {
height: 40px;
line-height: 40px;
}
.list :hover .navlinktwo:hover {
color: rgba(165,219,89,1);
}
.hidden {
display: none;
}
.listtwo {
position: absolute;
display: block;
background: black;
color: #fff;
float: none;
}
.navlinktwo {
font-size:15px;
font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
color: #fff;
text-decoration: none;
}
.navlink:hover + .hidden, .hidden:hover {
display: block;
}

Answer 1

给你:jsfiddle让我知道是否有帮助
改变了一些东西。
下拉菜单没有正确显示，因为它的位置不正确，它消失了，因为父菜单和下拉菜单之间有间隙。用简单的行高修复了这个问题

居中对齐使用这个 .hidden {left:-50%;min-width:200%;padding: 0;} .listtwo { text-align:center;}

代码:

<header>
<!--Navigation Bar-->
<nav>
<ul class="navbar">
<li class="list"><a href="http://www.operadevelopers.com/contact"     class="navlink">Contact</a></li>
<li class="list"><a href="#" class="navlink">Buyers Section</a>
<ul class="hidden">
<li class="listtwo"><a href="#" class="navlinktwo">EMI Calculator </a></li>
<li class="listtwo"><a href="#" class="navlinktwo">Apply For Loan</a></li>
<li class="listtwo"><a href="#" class="navlinktwo">Make An Enquiry</a></li>
</ul>
</li>
<li class="list"><a href="#" class="navlink">Referral</a></li>
<li class="list"><a href="#" class="navlink">What's New</a>
<ul class="hidden">
<li class="listtwo"><a href="#" class="navlinktwo">Just Launched</a></li>
<li class="listtwo" ><a href="#" class="navlinktwo">Launching Soon</a></li>
<li class="listtwo"><a href="#" class="navlinktwo">Completed Projects</a>    </li>
</ul>
</li>
<li class="list"><a href="#" class="navlink">About us</a></li>
<li class="list"><a href="#" class="navlink">Home</a></li>
</ul>
</nav>
</header>

header {
background: black;
position: absolute;
width: 100%;
height: 150px;
}
.navbar {
list-style-type: none;
position: relative;
margin-top: 95px;
margin-right: 70px;
z-index: 100;
}
.list a { line-height:20px}
.list {
position: relative;
float: right;
border-right: 2px solid #fff;
padding-left: 10px;
padding-right: 10px;
}
.navlink {
display: inline-block;
font-size: 15px;
font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
color: #fff;
text-decoration: none;
}
.list:hover .navlink  {
color: rgba(165,219,89,1);
}
.list:hover .navlinktwo {

line-height: 40px;
}
.list :hover .navlinktwo:hover {
color: rgba(165,219,89,1);
}
.hidden {
top: 100%;
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
background: black;
padding-left:0
}
.listtwo {
padding-left: 10px;
padding-right: 10px;
display: block;

color: #fff;
float: none;

}
.navlinktwo {
font-size:15px;
font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
color: #fff;
text-decoration: none;
width: auto;
min-width: 100px;
}
.navlink:hover + .hidden, .hidden:hover {
display: block;
}