CODEWITHSUNDEEP
htmlcssdrop-down-menu
Rhmul
Rhmul

Reputation: 27

CSS: Drop down sub menu won't align or stay on hover

I have a nav bar made up below, but I cant get the drop down menu to line up with the bottom of the main nav bar. I also have the issue of when you go to click one of the headings on the drop down menu it disappears. 

<ul>

<li><a href="index.php">Home</a></li>
<li><a href="donate/index.php">Donate</a></li>
<li><a href="vote/index.php">Vote</a></li>

<li class='sub'><a href="#">Info</a>
<ul>
<li class='sub'><a href="#">Player Guide</a></li>
<hr />
<li class='sub'><a href="#">Server Commands</a></li>
<hr />
<li class='sub'><a href="#">Community Rules</a></li>
<hr />
<li class='sub'><a href="#">The Team</a></li>
<hr />
<li class='sub'><a href="#">Staff Handbook</a></li>
<hr />
<li class='sub'><a href="#">Server Alumni</a></li>
</ul>
</li>
<li>Live Map</li>

</ul>

<hr />
</div>

CSS here: https://jsfiddle.net/s3q04h5q/

Upvotes: 0

Views: 305

Answers (2)

NooBskie
NooBskie

Reputation: 3841

This bit aligns your dropdown to the bottom of the header line adjust top as you need

#menu > ul > li:hover > ul{
  top: 45px;
}

The reason your dropmenu dissappears on hover is because the hitbox of the link is to small which can be fixed by applying this to the dropdown link

.sub a{
  padding: 20px 0px;
}

Upvotes: 1

Stefan Neuenschwander
Stefan Neuenschwander

Reputation: 833

The problem with the alignment is in your CSS. Take a look at:

#menu > ul > li:hover > ul {
    opacity: 1;
    top: 65px;
    visibility: visible;
    border-style: solid;
    border-width: 3px;
    border-color: #7b8e19;
}

The padding top is pushing the dropdown even further down. Lower the 65px and you should be good.

Upvotes: 2

Related Questions