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 hide currently selected li item from being an option when user clicks dropdown again?

    How can I transcend my confusion over CSS?

    How to add next / previous buttons to Surface tablet touch-slideshow?

    how to align vertically a dynamic-height div inside another fixed height div

    How to control element position when changing window size for parallax purpose

    How do I float a
  • to the right in CSS?
  • How to make div horizontally and vertically centered without scripting?

    css - how to determine why a particular css rule is being overwritten

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

    How to apply asynchronously fetched CSS into view

    How to keep website footer at bottom even when page expands downwards

    How to attach a CSS stylesheet to FXML?

    How to Generate All Possible CSS 2 Selector Combinations?

    How to load an onScroll background image before user scrolls to them?

    How to debug CSS with Firebug for an element that only appears when clicked?

    How can I convert AI to HTML & CSS to use in ASP.Net Application

    How to make links work, regardless of location in directory structure?

    How to accomplish this layout with CSS and HTML?

    How to place div on top of responsive rotated div?

    How to get the system accent color for UWP-Apps?

    how to add css classes to a component in react?

    HTML5 CSS (How to on hover image ignore transparent)

    How can i spin an image -360 degrees and +360 degrees using the -webkit and jQuery?

    how to implement background img

    How to position the tip arrow of bootstrap popover next to a text field- CSS/Jquery

    How do I get this CSS text-decoration override to work?

    How to confine an animated div to its parent div

    How to select the las Li with Xpath or Css Selector

    jQuery: how to avoid transparent effect on a mask div

    How to change the style/css of a tooltip?