Horizontal menu with Horizontal submenu

I asked this question earlier but may have made other confused.

My goal is to make a Horizontal submenu like these sites:

www.forbes.com
www.aplus.net
www.davacosourcing.com

However, I'd like it to be ALL CSS, no images and while the mouse is hovering on the main horizontal menus - say for example "Home", "About us", "Products", etc..it displays a clickable "horizontal submenu" just below it, (Not Vertical, which is all the search engines seem to have ) .


I did look at suckerfish & cssforplay.co.uk and there were no solutions.

I will accept javascript if it's necesary but prefer only CSS. I really appreciate any help.

Thanks again.

 

Take a look at this ALA article. I think you'll find it useful. With some JavaScript you can make the menus "stay."

http://www.alistapart.com/articles/hybrid

 

Thanks, it's a good article.

I read thru it a couple of times and tested the code out and the top horizontal menu does not display, the bottom "subnav" Horizontal menu does.

I used the .js as well.

can you cut & paste and to see what I am talking about.

 

You might also check out Accessible Website Menu as well. That is who we have used in the past and been very pleased with the results.

 

Are you copying the code from http://www.alistapart.com/d/hybrid/hybrid-4.html ?
It works.

It might work, but it costs money.

 

wow definitely a good idea!

 

Good article! Thanks

 

That has been bookmarked. Thanks a million

 

in my application there is a main menu and sub menu corresponding to each item in main menu.
when i take my pointer on any item in main menu the sub menu appears horizontally but it doesnot start from extreme left. which property should i change in css or html so that the sub menu will start from extreme left??

 

Hi Lucas,

There are two images we need to link to so we can see all the nav bar.

One is in
#divNav
background-image: url(yourImageHere.jpg (800 x 80px)


The other is in
#liRenaissance a, #liArtNouveau a, #liModern a, #liPostModern a, #liDigital a
background-image: url(bk-dropdownMap.gif (500 x 98px)

Once you link to some images, it should work and you will see everything. Hope that helps!

 

Thanks chewbacca! Awesome article. I love reading A List Apart's stuff.

 

see http://www.alivethemes.com/how-to-c...izontal-menu-with-subcategories-in-wordpress/

might help you out.

 

A link to the website would help much more instead ...

 

Hi,thanks for providing such useful link because i was also facing the same problem in designing of my website.