CSS horizontal submenu

Question

I'm working on the navigation bar for a website and currently the main menu is complete. However, the "Services" and "Products" buttons need to each have their own sub-menu. The sub-menu should normally be hidden from view and appears when the user mouse-overs on the respective button.

Here is a fiddle with the desired result. Obviously, I'd rather not use any javascript if possible.

The idea I had initially was to have sub-menu have position: absolute with a z-index value lower than that of the main-menu, so that it can slide underneath the main-menu. However, doing so messes up with the width if I give it width: 100% and since my site is responsive, I avoid static widths.

I also tried doing with relative positioning, but that doesn't work either.

Another thing I don't like with that approach is that the markup for the main menu and sub-menu get split. Is it possible to get the above result, but with this markup?

<nav>
    <ul class="nav">
        <li role="presentation" class="active"><a href="#">Home</a></li>
        <li role="presentation"><a href="#">Services</a>
            <ul>
                <li role="presentation"><a href="#">Link 1</a>
                <li role="presentation"><a href="#">Link 2</a>
            </ul>
        </li>
        <li role="presentation"><a href="#">Products</a>
            <ul>
                <li role="presentation"><a href="#">Link 3</a>
                <li role="presentation"><a href="#">Link 4</a>
            </ul>
        </li>
        <li role="presentation"><a href="#">About</a></li>
        <li role="presentation"><a href="#">Contact</a></li>
    </ul>
</nav>

Here is my code:

CSS

body {
    font-size: 0;
}

.bodyframe {
    display: inline-block;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.6);
}

.div_container {
    max-width: 1460px;
    width: 100%;
    display: inline-block;
    margin: 0 auto;
}

header {
    width: 100%;
    height: 49px;
}
.nav {
    display: block;
    position: relative;
    list-style: none;
    background: #304770;
    z-index: 10;
}

.nav li {
    display: inline-block;
    background-color: #304770;
    margin: 0 5px;
}

.nav li a {
    padding: 12px 15px;
    font-size: 18px;
    color: #EFEFEF;
    display: block;
}

.nav li.active a {
    color: orange;
}

.nav li.active a:before {
    width: 100%;
}

.nav li a:hover {
    background-color: #304770;
    color: orange;
    transition: color 0.25s;
}

.nav li a:before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 0;
    background-color: orange;
    -webkit-transition: width 0.2s;
    transition: width 0.2s;
}

.nav li:nth-last-of-type(1) a:after {
    display: none;
}

.nav li a:hover:before {
    width: 100%;
}

.nav li a:after {
    content: "";
    display: block;
    position: absolute;
    right: -8px;
    top: 21px;
    height: 6px;
    width: 6px;
    background: #ffffff;
    opacity: .5;
}

.subnav {
    list-style-type: none;
    display: block;
    position: relative;
    top: -49px;
    margin: 0;
    z-index: 1;
    background-color: #ccc;
    -webkit-transition: top 0.2s;
}

.subnav li {
    display: inline-block;
    background-color: #ccc;
    margin: 0 5px;
}

.subnav li a {
    padding: 8px 10px;
    font-size: 14px;
    color: #EFEFEF;
    display: block;
}

HTML

<div class="bodyframe div_container">
    <header>
        <nav>
            <ul class="nav">
                <li role="presentation" class="active"><a href="#">Home</a></li>
                <li role="presentation"><a href="#">Services</a></li>
                <li role="presentation"><a href="#">Products</a></li>
                <li role="presentation"><a href="#">About</a></li>
                <li role="presentation"><a href="#">Contact</a></li>
            </ul>
        </nav>
        <ul class="subnav">
            <li><a href="#">Test</a></li>
            <li><a href="#">1243</a></li>
        </ul>
    </header>
</div>

Answer 1

If you only need the submenu to mimic the one in the example, without using jQuery, using the second chunk of HTML with the CSS you supplied you could do:

nav:hover~ul {
   top: 0px;
}

This shows the next ul element, in this case the subnav, whenever the nav is hovered over ("~" selector means select the ul element preceded by nav:hover).

However, if you want to do something more dynamic... id suggest just using JS/jQuery as well