Posted By

chrisdpratt on 09/11/09

Tagged

Versions (?)

Last Edited at 09/11/09 12:01pm

Statistics

Viewed 889 times

Favorited by 4 user(s)

Related snippets

Cross-Browser Pure CSS Dropdown Navigation

/ Published in: CSS

To make the menu work in IE6 (which doesn't support the :hover pseudo element on anything but links and tables), the IE6-specific CSS calls on [Whatever:hover][whatever]. If using [Dean Edwards' IE7-js][IE7-js], this is unnecessary as his script fixes li:hover behavior in IE6.

[whatever]: http://www.xs4all.nl/~peterned/csshover.html "Whatever:hover"
[IE7-js]: http://code.google.com/p/ie7-js/ "Dean Edwards' IE7-js"

Expand | Embed | Plain Text

Copy this code and paste it in your HTML

<!--# HTML #-->
 
<ul id="nav">
  <li><a href="#">Home</a></li>
 
  <li><a href="#">About</a></li>
  <li><a href="#">Products</a><ul>
    <li><a href="#">Product 1</a></li>
    <li><a href="#">Product 2</a></li>
    <li><a href="#">Product 3</a></li>
  </ul></li>
 
  <li><a href="#">Services</a><ul>
    <li><a href="#">Service 1</a></li>
    <li><a href="#">Service 2</a></li>
    <li><a href="#">Service 3</a></li>
  </ul></li>
  <li><a href="#">Contact</a></li>
 
</ul>
 
<!--# CSS #-->
 
<style type="text/css">
#nav {
  list-style:none;
  }
#nav li {
  float:left;
  }
#nav ul {
  position:absolute;
  top:-999px;
  width:1px;
  height:1px;
  overflow:hidden;
  list-style:none;
  }
#nav ul li {
  float:none;
  }
#nav li:hover ul {
  top:auto;
  width:auto;
  height:auto;
  overflow:visible;
  }
#nav a {
  display:block;
  padding:5px 10px;
  background:#ccc;
  color:#000;
  text-decoration:none;
  }
#nav a:hover, #nav li:hover a {
  background:#666;
  color:#fff;
  }
#nav ul a {
  background:#666;
  color:#fff;
  }
#nav ul a:hover {
  background:#000;
  }
</style>
 
<!--[if lt IE 7]>
<style type="text/css">
body {
  behavior:url(csshover3.htc); /* or equivalent */
  }
#nav li {
  display:inline;
  }
#nav ul a {
  width:8em; /* resize as appropriate */
  }
</style>
<![endif]-->