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

I have just finished developing a CSS Menu for mobile devices, using absolutely ZERO Javascript. Basically, by applying the tabindex="-1" attribute to anything you want, you allow that element to react to the :focus CSS property without actually being part of the tab order (so you can't reach that element by tabbing through). Applying this to the currently accepted solution:

<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-menus are CLICKABLE, we insert the tabindex on whatever we want to click on and the CSS gets changed to this:

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

Check out this Codepen for my Mobile Menu:

• NO javascript
• Responsive
• Stylable
• HTML Hamburger menu symbol!

Answer 2

It is certainly possible to do drop-down menus in CSS only, and many sites are now using it.

What you won't get (yet) with CSS are any animated roll-outs, etc - the menu will just toggle between visible and hidden. If you want animated roll-outs, jQuery may be a better option. That said, CSS animation does exist. It is only implemented in one or two browsers, but you could add it to your stylesheet anyway; it won't break browsers that don't support it; they just won't get the animation.

Cross-browser compatibility for CSS menus is relatively easy, as long as you ignore IE6. IE7/8 can be made to work without too much fuss, but IE6 is badly broken for virtually all CSS-only menu techniques. If at all possible, try to avoid having to support IE6. Its an old browser, and really needs to be left to die in peace.

Others have already provided links to some good examples, so I won't repeat them here.

Answer 3

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

Answer 4

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

Answer 5

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 6

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

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