CSS menu without javascript

Question

Can someone give a link or is it possible to create a menu entirely depending on CSS and not a single bit of javascript ?

A requirement is a drop-down menu that can have many children ( submenu ) .

Will anything if it is created this way be cross browser compatible ?

Any help on this topic would be appreciated!

EDIT

Thanks for all your inputs, one more doubt

Is it possible to implement, and not use ul li

say div span , as this can help me create a menu that won't change my current HTML structure!

Answer 1

The trick is the pseudo-class :hover .

 <ul class="menu"> <li> <a href="...">Menu Item 1</a> <ul class="submenu"> <li><a href="...">Submenu 1</a></li> <li><a href="...">Submenu 2</a></li> </ul> </li> <li> <a href="...">Menu Item 2</a> <ul class="submenu"> <li><a href="...">Submenu 3</a></li> <li><a href="...">Submenu 4</a></li> </ul> </li> </ul> 

Ok Thus, your entire submenu should go inside the <li> element of the main menu to which it corresponds. Then for CSS:

 .submenu { display: none; } .menu>li:hover>.submenu { display: block; } 

Do some styling and get the job done.

Edit: For a different menu level, this is very simple. Use this CSS:

 .menu li>ul { display: none; } .menu li:hover>ul { display: block; } 

Note that I replaced .menu>li:hover with .menu li:hover . This tells the browser that all li elements are under the main menu (and not just the descendants themselves) and show their submenu when they hang. I also got rid of using the submenu class because it is not needed if you base CSS on descendants. This will allow you to add as many levels as you want.

Answer 2

Check out this site: http://www.cssplay.co.uk/menus/ , which has many different menus with only CSS . Link.

Answer 3

Check this out: http://www.cssplay.co.uk/menus/final_drop.html

Answer 4

See if this helps http://www.howtocreate.co.uk/tutorials/testMenu.html

http://www.texaswebdevelopers.com/blog/template_permalink.asp?id=129

Answer 5

Of course, you can only create drop-down menus in CSS, and many sites now use it.

What you won't get (yet) with CSS is any animated rollouts, etc. - the menu will simply switch between visible and hidden. If you want animated rollouts, jQuery might be the best option. However, CSS animation does exist. It is implemented only in one or two browsers, but you can still add it to the stylesheet; it will not crash browsers that do not support it; they just won’t get the animation.

Browser compatibility for CSS menus is relatively simple if you ignore IE6. IE7 / 8 can be made to work without any problems, but IE6 is severely broken for almost all CSS-only menu methods. If at all possible, try to avoid IE6 support. Its an old browser, and it really needs to be left alone.

Others have already provided links to some good examples, so I will not repeat them here.

Answer 6

I just finished developing CSS menus for mobile devices using absolutely ZERO Javascript. Basically, by applying the tabindex="-1" attribute to anything, you let this element respond to the CSS :focus property, without actually being part of the tab order (so you cannot reach this element by tab). Applying this to the current decision:

 <ul class="menu"> <li tabindex="-1"> Menu Item 1 <ul class="submenu"> <li><a href="...">Submenu 1</a></li> <li><a href="...">Submenu 2</a></li> </ul> </li> <li tabindex="-1"> Menu Item 2 <ul class="submenu"> <li><a href="...">Submenu 3</a></li> <li><a href="...">Submenu 4</a></li> </ul> </li> </ul> 

I removed the <a> tags (because now our drop-down menu is CLICKABLE, we insert tabindex on everything we want, and the CSS changes to this:

 .menu > li:not(:focus) > .submenu { display: none; } 

Check out Codepen for my mobile menu:

• NO javascript
• Adaptive
• style-aware
• HTML symbol of the hamburg menu!