CSS Menu without javascript

Question

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

The Requirement is a dropdown menu, which can have many children ( submenu ).

Will anything if created like this will be cross browser compatible?

Any help on this topic will be appreciated!.

EDIT

Thanks for all your inputs one more doubt

Can this be implemented rather than using ul li

say div span combination as that may help me achieving a menu which won't change my current html structure!

Answer 1

The trick is the :hover pseudo-class.

<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? So your entire submenu has to go inside the <li> of the main menu item it corresponds to. Then for the CSS:

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

Do a bit of styling, and job done.

Edit: For another layer of menus, it's really simple. Use this CSS:

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

Note that I've replaced .menu>li:hover with .menu li:hover. That tells the browser to find all li elements below the main menu (not just immediate descendants) and show their submenu when hovering. I've also got rid of using the submenu class because it's not really needed if you're basing the CSS on descendants. This will let you add as many levels as you want.

Answer 2

Check this site : http://www.cssplay.co.uk/menus/ which have a lot of different menus with CSS only. A reference.