Cascading Dropdown Navbar in HTML

[kitkat9933]

Edit:

I am currently rebuilding my schools site and I am having a little trouble finishing of the Dropdown bar.

I have got it working but when I hover on a parent to show the children, it expandS the navbar FULLY rather than just creating a column downwards, pictures below to explain..
The new design is the top one, but I want the menu dropdown to do what the old one does, but in the new design.


Currently it does this:





And I want to make it do this



Any advise? If it makes sense lol

 

[kitkat9933]

Do you mean the 'Home', 'About us' etc nav at the top?

If so, it's a UL/LI menu, so you can create sub UL elements, and hide them until the parent is CSS :active, or :hover.

Ok, i'll try that thanks.

 

[kitkat9933]

Is this what you're after:

http://jsfiddle.net/4ScFz/400/

Yes thanks.

 

[kitkat9933]

First post updated, with where I currently am.

 

[kitkat9933]

Are you using the link I sent you above? If so you'll need to target the code that starts with

.second-level-menu > li {}

Essentially, you need to do this so that you target just the drop downs and set them to a different height, as currently your second level is as high as the top level links.

I integrated that code to get where I am now, and targeting that bit but still with no luck. So close, but yet so far way.

This is my current code on Jsfiddle if it could be possible for you to have a look at. Bare in mind some formatting and styling has messed up and the pictures missing in JSfiddle.

http://jsfiddle.net/eyf2T/

 

[kitkat9933]

I'll take a proper look if I have the chance later. Just to confirm, when the menu expands, should the dark grey background go along with it or just stay on the top line?

You have quite a lot of code on the jsfiddle page as well. To make it a little more digestible, for us are yourself, you might want to just build the menu outside of the page, get it working, and then look at dropping it into the site.

Thanks,

Ok I'l try that as well.

When the menu current expands, the entire top bar expand as well. I want it so only the menu expands downwards.

 

[kitkat9933]

Hey dude, without being able to get Firebug on that menu of yours it's hard to debug why it's pushing the rest of the page down, jsfiddle doesn't tend to work to well when you have whole pages of a site in there. If you want to send me copies of the pages or an FTP link I'll happily take a proper look though. Just trust me with download links etc... if you need more help

That be great if you could mate, I'll send you in trust tomorrow when I get home. I'll defiantly owe you some beers!

 

[kitkat9933]

Thank you!

That's great, I owe you a big favour.