Question

I am trying to make a 2 level vertical navigation menu. What’s happening right now is that I could display the 2nd level navigation when a first level navigation where it belongs to is hovered. My problem is that as the 2nd level menu slides down, the background of the element that would make it appear like a ribbon would not show in as a block, it would look like it would slide down first then the background will show up when it’s done the effect.

Here is the fiddle: http://jsfiddle.net/BapmB/

I’ve been trying to change my html and my CSS but I don’t have any luck. Can somebody explain to me what’s the problem with this? Or at least guide me on how to fix it?

Thanks in advance for any help.

Answer 1

You just need to a wrapper <div> element around your navigation ribbons and position the <span> blocks inside of that div.

See this fiddle: http://jsfiddle.net/stevenschobert/4Q6Ye/