How to make a dropdown menu with CSS

Tags: css

Problem :

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!)

Solution :

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!

    CSS Howto..

    CSS - How to auto adjust DIV height according to next sibling height?

    How to make a sticky footer using CSS?

    How to make dynamic content positioning?

    CSS - how to overflow from div to full width of screen

    How to convert HTML button to HTML input, while keeping all CSS?

    How to align multiple images in “li” on center

    how to make input and select look nice beside eachother with custom height?

    How to center the image source within an image tag?

    How to make a horizontal div scroll bar float like a fixed CSS div

    How to animate searchbox length from focusing on the textbox class CSS3?

    Fullpage.js: How to add css class “active” to slide anchor

    How to create this type of window,as described in the attached picture with HTML,CSS? [closed]

    How to create correct .css for Html.TextBoxFor

    How to horizontally center a link element with CSS?

    Manual JavaScript Slideshow with Dynamic images

    How to set parent div height to self adapt to the inner div height?

    How can I make a two column layout's main div auto fit to browser width?

    How to get css3 multi-column count in Javascript

    Javascript: how to append more text to user copied text ala

    How to verify that google web font is working or not?

    How do i select only one column when hovering over it in a drop down jQuery menu?

    How to highlight table row on hover using CSS only?

    How to center text horizontally and vertically within box element? [duplicate]

    How do I make a horizontal sitemap using UL?

    AngularJS ng-show animation cross-fade inside ng-repeat

    Find how an element's css has changed after jQuery “toggle” function has been used

    DIV Background Image Doesn't Show in Firefox or Chrome (But only online). Online it works for IE?

    how to clean the css style of jquery-ui be added automatically when someone use “.draggable()”

    How does one change the colour of a div based on current time?

    How to display data from a file on website load? [closed]