I'm having z-index and centering issues with a horizontal sub menu built in css [wordpress]

Question

The Code: http://jsfiddle.net/TwCLr/

If you'd like to see what I'm trying to accomplish, skip to the link at the bottom of this post.

I'm having positioning issues as well as z-index problems in a horizontal sub-menu design.

I imagine this whole process could be handled through jquery (might even be necessary). I'd be happy to hear suggestions on that if anyone has a script that will work here.

I should also mention that the html for the menu is generated with wordpress. If I wanted to change that portion, I would need to rewrite the function that calls for the menus.

functions.php

function conceptx_setup() {
register_nav_menu( 'primary', __( 'Primary Menu', 'conceptx' ) );}
add_theme_support( 'menus' );

nav html

<?php wp_nav_menu(); ?>

It would be ideal if there was a solution here that didn't require that the html portion to be changed. I've written out the wordpress generated structure in the jsfiddle link at the top of the post.

---

And a quick and dirty gif of how it's supposed to function: http://i.imgur.com/ptYeZDg.gif

---

If anyone can help, I'd really appreciate it.

Answer 1

Are you looking for this: Fiddle

Added/Changed CSS

.menu .menu-item:hover .sub-menu {
    top: 82px;
}

.menu .menu-item .sub-menu {
    position: absolute;
    left: 0;
    top: 16px;
    z-index: -1;
    width: 100%;
    transition: all .5s;
}

.menu .menu-item .sub-menu .menu-item a {
    opacity: 1 /* just remove opacity: 0*/
}

EDIT: Centered the menu

Fiddle Here

Full-screen here