How can I make my horizontal navigation bar a drop down menu?
51,364
Add this CSS:
#menu, #menu ul {
margin:0 auto;
padding:0;
}
#menu li {
float: left;
position: relative;
list-style: none;
}
#menu > li:hover > ul {
display: block;
}
#menu > li > ul {
display: none;
position: absolute;
}
#menu li a {
white-space: nowrap;
}
Author by
Admin
Updated on July 12, 2020Comments
-
Admin almost 4 years
I've tried making horizontal drop down navigation bars following tutorials, however they are never centered and I can't figure out how to center them. I tried going in the opposite direction and centering my navigation bar first, and then attempting to make it a drop down menu, though this seems to throw everything off. This is the code I have.
EDIT: The problem I am having is that the submenu is displayed when the page is loaded, along with a bullet point, which I'm sure can be fixed by setting the list-style to none, however I'm not sure where in the CSS this should be.
I'm trying to create a menu similar to THIS. I understand this uses joomla and I am not.
#header { height: 100px; margin-left: auto; margin-right: auto; text-align: center; } #content { max-width: 700px; margin-left: auto; margin-right: auto; padding: 20px; } #footer { height: 85px; padding-top: 40px; margin-left: auto; margin-right: auto; text-align: center; } #menu { margin: 0 auto; display: inline-block; list-style: none; padding: 0; border-top: 1 solid #ccc; border-left: 1 solid #ccc; border-bottom: 1 solid #ccc; } #menu li { float: left; } #menu li a { display: block; padding: 10px 10px; text-decoration: none; font-weight: bold; } #menu li a:hover { color: #c00; }
<ul id="menu"> <li><a href="#">Home</a> </li> <li><a href="#">Kandi</a> <ul> <li><a href="#">Claim Kandi</a> </li> </li> <li><a href="#">Events</a> </li> <li><a href="#">Artists</a> </li> <li><a href="#">Community</a> </li> <li><a href="#">Merchandise</a> </li> </ul>