Horizontal slide down menu trouble alining elements horizontally

Question

I have a vertical accordion menu that I want to translate into horizontal format. The reason for this is the structure and how all the sub elements aline perfectly below their parents. The ultimate goal is to have a slide down menu that slide down all sub elements and they stay alined under their parent elements.

The problem is I cannot get the top level li elements to display:inline-block;. They sit on top of each other and general make a mess. Is this becuase of the html structure?

JSfiddle

And an example of the kind of thing I'm trying to replicate.

Answer 1

It's working now: http://jsfiddle.net/KcR8U/3/

I just updated the CSS like this:

#nav li{
    display: inline-block;
    position:relative;
}
#nav li ul{
    /* other styles */
    position:absolute; 
    z-index: 100;     
}