Awesome Hat Awesome Hat - 5 months ago 15
CSS Question

Drop down in Navigation Menu not displaying fully and disappearing on hover

I have a dropdown on hover in Navigation menu which is cutting off its element in a strange way and displaying incorrectly. Further, It disappears also half of the time when i try to move the pointer to a drop down.

Here is a 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

here you go : jsfiddle let me know if it helps
changed a few things.
the dropdown didn't appear correctly because it wasn't positioned right and it disappeared because there was a gap between a parent and the dropdown menu. fixed that with a simple line height

to center align use this .hidden {left:-50%;min-width:200%;padding: 0;} .listtwo { text-align:center;}

code:

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