I am trying to make my own navigation bar to get a better understanding of to create good navigation bars. I have created the bar along with changing the background when hovering over links but I have been unable to add a drop down menu (sub-menu) when hovering over the tag li. I have created a box for content for the sub-menu but is unable to be displayed for some reason. I have included my code below. What I want is for the class subcategory to show when li tag is hovered over. Also, I apologize in advance if my code isn't formatted properly. This is my first question on stackoverflow.
#navbar ul {
list-style-type:none;
color: #000;
padding: 0px;
text-align: center;
}
li:hover {
background-color: #0C0;
padding: 16.5px .1px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.subcategory {
display: none;
width: 100px;
height: auto;
background-color: #FC0;
color: #03F;
position: absolute;
top: 100px;
}
li:hover .subcategory {
display: block;
}
#navbar {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
background-color: #FC0;
float: left;
font-family: Arial, Helvetica, sans-serif;
}
#navbar ul li {
display: inline;
}
#navbar ul li a {
padding: 0 1.5em;
text-decoration: none;
}
<div id="navbar">
<ul>
<li><a href="#">LinkHere</a></li>
<div class="subcategory">Hey</div>
<li><a href="#">LinkHere</a></li>
<li><a href="#">LinkHere</a></li>
<li><a href="#">LinkHere</a></li>
<li><a href="#">LinkHere</a></li>
<li><a href="#">LinkHere</a></li>
<li><a href="#">LinkHere</a></li>
<li><a href="#">LinkHere</a></li>
<li><a href="#">LinkHere</a></li>
</ul>
</div>
