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 enable auto indentation in lists and list items?

    How to style the wp_list_page in wordpress?

    How Do I Perfectly Center a Float Element in Between Two Floated Elements?

    Drag and drop in AngularJS: make a directive that is a drop zone, showing an overlay when dragging

    How to get inline-blocks to sit side-by-side?

    Dynamic HTML 3 layers nested quotes - how to do?

    CSS bottom bar isn't correctly shown with chrome

    How to align items of a list CSS/jquery

    How to set width of an element in %

    How to enable top and bottom margins between a series of spans inside a div?

    How would I go about applying some sort of dynamic range counter to jQuery and CSS?

    How can I use external HTML form in Joomla site?

    Captions after 1st slide doesnt show for flexslider

    CSS: How to make the border of a

    tag to be 100 percent on the div tag?

    How to set an Ionic list item height with a background image

    How to flow text from a box to another with CSS

    How to select text that is not marked up with CSS/jquery?

    How to make a div a link as it transitions in CSS

    HTML5 / CSS| How do I disable responsivity when a scroll bar appears?

    How to install custom fonts in css

    css3 : how to make div go up to bottom of page?

    How can I get placeholder text to shrink to fit within its text input element and show its entire value? [duplicate]

    How do I make a element a regular tab stop within a form?

    How to extend css class

    How to make a box expand a distance from the sides

    How to prevent this css shape to scroll left and right

    how to get css highlighting and hinting for php files in dreamweaver that are being read as css files?

    How to change font on css?

    How to fit your website for all or at lest most screen resolutions?

    How to Edit the CSS File of the Installed Plugin in Wordpress