How to make a dropdown menu with CSS
I am trying to make a drop down menu in my navigation div just using CSS. I have the style and everything I want, but the only thing that seems to get messed up is the height. I have three list items that I want to appear when hovered over the link, but only one appears. I know it has something to do with the height of the nav div, but I don't know how to fix it because I don't want the purple bar to appear any taller than it is. I just want the links to drop down over top of the text below like normal. Help please?
(Yes this is for a school assignment, but I have done all the work myself I just need help getting through this one obstacle, for those of you who are weird about helping students!)
You are going about your code all wrong it seems, I read through your source, and apparently you are hiding all the menu items very far out side of the screen with
left: -999em which is a very bad way to do this.
You should try looking into the CSS
display rule, you can use
display: none to hide a div, and then
display: block or
display: inline to show it again, dependent on if you want the item to be inline or block.
Try rewriting how your code acts with your menu items, such as a simple
display change on hover, would suffice.
You should try to keep your IDs and Classes easier to understand, currently they seem a bit unorganized and uninformative.
I hope you're able to get this working!