A continuación les mostramos un ejemplo bastante completo de un menú desplegable hecho solamente con CSS. Para este menú no hemos utilizado ningún código JavaScript, es solamente, puro CSS.

El código está validado y funciona en todos los navegadores. Para IE6 y lograr una correcta validación, se dispuso parte del código como comentarios. El ejemplo presenta dos hojas de estilos, una para IE y otra para el resto de navegadores como Firefox, Opera, Crome, Safari.

Código HTML

<div>

<ul>
<li><a href="../menu/index.html">Menú 1</a>

<!--[if lte IE 6]>
<a href="#">Menú 1
<table><tr><td>
<![endif]-->

    <ul>
    <li><a href="#" title="Menú 1.1">Menú 1.1</a></li>
    <li><a href="#" title="Menú 1.2">Menú 1.2</a></li>
    <li><a href="#" title="Menú 1.3">Menú 1.3</a></li>
    <li><a href="#" title="Menú 1.4">Menú 1.4</a></li>

    <li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">Menú 1.5 &gt;</a>

    <!--[if lte IE 6]>
    <a href="#" title="Menú 1.5 &gt;">Menú 1.5 &gt;
    <table><tr><td>
    <![endif]-->

        <ul>
            <li><a href="#" title="Menú 2.1">Menú 1.5.1</a></li>
            <li><a href="#" title="Menú 2.2">Menú 1.5.2</a></li>
            <li><a href="#" title="Menú 2.3">Menú 1.5.3</a></li>
        </ul>

    <!--[if lte IE 6]>
    </td></tr></table>
    </a>
    <![endif]-->

    </li>

    <li><a href="#" title="Menu 1.6">Menú 1.6</a></li>
    <li><a href="#" title="Menu 1.7">Menú 1.7</a></li>
    <li><a href="#" title="Menu 1.8">Menú 1.8</a></li>
    <li><a href="#" title="Menu 1.9">Menú 1.9</a></li>
    <li><a href="#" title="Menu 1.9.1">Menú 1.9.1</a></li>
    </ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

<li><a href="#">Menú 2</a>

<!--[if lte IE 6]>
<a href="#">MENUS
<table><tr><td>
<![endif]-->

    <ul>
    <li><a href="#" title="Menú 2.1">Menú 2.1</a></li>
    <li><a href="#" title="Menú 2.2">Menú 2.2</a></li>
    <li><a href="#" title="Menú 2.3">Menú 2.3</a></li>
    <li><a href="#" title="Menú 2.4">Menú 2.4</a></li>
    <li><a href="#" title="Menú 2.5">Menú 2.5</a></li>
    <li><a href="#" title="Menú 2.6">Menú 2.6</a></li>
    <li><a href="#" title="Menú 2.7">Menú 2.7</a></li>
    </ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

<li><a href="#">Menú 3</a>

<!--[if lte IE 6]>
<a href="#">Menú 3
<table><tr><td>
<![endif]-->

    <ul>
    <li><a href="#" title="Menú 3.1">Menú 3.1</a></li>
    <li><a href="#" title="Menú 3.2">Menú 3.2</a></li>
    <li><a href="#" title="Menú 3.3">Menú 3.3</a></li>
    <li><a href="#" title="Menú 3.4">Menú 3.4</a></li>
    <li><a href="#" title="Menú 3.5">&lt; Menú 3.5</a>

    <!--[if lte IE 6]>
    <a href="#" title="Menú 3.5">&lt; Menú 3.5
    <table><tr><td>
    <![endif]-->

        <ul>
            <li><a href="#" title="Menú 3.5.1">Menú 3.5.1</a></li>
            <li><a href="#" title="Menú 3.5.2">Menú 3.5.2</a></li>
            <li><a href="#" title="Menú 3.5.3">Menú 3.5.3</a></li>
        </ul>

    <!--[if lte IE 6]>
    </td></tr></table>
    </a>
    <![endif]-->

    </li>
    </ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>
</ul>

</div>

Código CSS general


/* estilos comunes */

.menu_post {
  font-family: arial, sans-serif;
  width:318px;
  height:100px;
  position:relative;
  font-size:11px;
  z-index:100;
}
.menu_post ul li a, .menu_post ul li a:visited {
  display:block;
  text-decoration:none;
  color:#000;
  width:104px;
  height:20px;
  text-align:center;
  color:#fff;
  border:1px solid #fff;
  background:#666;
  line-height:20px;
  font-size:11px;
  overflow:hidden;
}
.menu_post ul {
  padding:0;
  margin:0;
  list-style: none;
}
.menu_post ul li {
  float:left;
  position:relative;
}
.menu_post ul li ul {
  display: none;
}

/* specifico para navegadores que no sean IE */

.menu_post ul li:hover a {
  color:#fff;
  background:#a1a1a1;
}
.menu_post ul li:hover ul {
  display:block;
  position:absolute;
  top:21px;
  left:0;
  width:105px;
}
.menu_post ul li:hover ul li a.hide_post {
  background:#a1a1a1;
  color:#fff;
}
.menu_post ul li:hover ul li:hover a.hide_post {
  background:#a1a1a1;
  color:#000;
}
.menu_post ul li:hover ul li ul {
  display: none;
}
.menu_post ul li:hover ul li a {
  display:block;
  background:#ddd;
  color:#000;
}
.menu_post ul li:hover ul li a:hover {
  background:#a1a1a1;
  color:#000;
}
.menu_post ul li:hover ul li:hover ul {
  display:block;
  position:absolute;
  left:105px;
  top:0;
}
.menu_post ul li:hover ul li:hover ul.left_post {
  left:-105px;
}

Código CSS para IE

.menu_post ul li a.hide_post, .menu_post ul li a:visited.hide_post {
  display:none;
}
.menu_post ul li a:hover ul li a.hide_post {
  display:none;
}
.menu_post ul li a:hover {
  color:#fff;
  background:#a1a1a1;
}
.menu_post ul li a:hover ul {
  display:block;
  position:absolute;
  top:21px;
  left:0;
  width:105px;
}
.menu_post ul li a:hover ul li a.sub_post {
  background:#a1a1a1;
  color:#fff;
}
.menu_post ul li a:hover ul li a {
  display:block;