CSS: How to make a nav menu with a sub nav menu directly below it?


Tags: javascript,jquery,html,css

Problem :

I have a menu now, that can be found here... http://jsfiddle.net/EUaNY/

Now I'm wanting to have a sub menu that's the same style as that one, but shows up directly below it with the sub items for that particular link. Note that this menu is centered on my page with margin: 0 auto;, and the width of the page is width: 978px;. You can see this in .header-nav-menu. Sorry if I didn't include something my CSS is pretty basic. If you have any questions or anything I'll be happy to answer! Thanks!

BTW I would rather not use Javascript but if it's necessary that's fine.



Solution :

I'm not sure if you wanted the sub-menu to appear on hover, but it's pretty trivial using straight CSS by adding these 2 classes:

.header-nav-menu li > ul {
    display: none;
    position: absolute;
    width: 100%;
    padding: 4px 0;
    background: #3E0C0D;
}

.header-nav-menu li:hover > ul {
    display: block;
}

Here's your updated jsFiddle http://jsfiddle.net/EUaNY/1/


    CSS Howto..

    How to override CSS? [closed]

    How to double an image size in HTML using only CSS?

    How can I get as much of the text into a DIV row as possible?

    How to insert instance variable as css rule in Rails?

    How to freeze frame with css

    How to prevent mobile browser micro-shrinking HTML block level elements?

    How to create an infinite easing in and out CSS animation loop?

    How did overflow actually work here?

    CSS Flexbox : How to construct a specific layout

    How do I insert tag using :after css property?

    How to hide the third nested list in this css dropdown nested lists?

    Show just the necessary div when user clicks on a targeted div

    How to give border to any element using css without adding border-width to the whole width of element?

    How to target a specific div out of 4 divs with the same class with CSS

    How to implement small text list search functionality using CSS attribute selectors

    CSS: How to make the border of a

    tag to be 100 percent on the div tag?

    How to style a select and its option elements and add transitions?

    How to design resolution independent CSS elements?

    How do I center a character in a box using CSS?

    How to change CSS when it's ng-disabled?

    How to set fixed auto width in tab-content bootstrap?

    How do I get CSS mediaqueries to work with jQuery $(window).innerWidth()?

    how to make a navigation 100% width within an header wrapper

    How to dynamically create two rows of squares in html/css/javascript

    How to stop people from viewing my HTML and CSS [closed]

    How do you create boxes like github's explore section?

    How to vertically align text to the right of some text using css? [closed]

    How to make dynamic slideshow using php, mysql, css and html?

    How to create rolldown content with css?

    How to wrap an image in a div, and then center the div