Tutorial menu dépliant css compatible tout navigateurs et sans js

nous allons voir comment faire un menu deroulant 100 % css sans js compatible ie 6et tous navigateurs et un menu déroulant js

code:

<link rel="stylesheet" type="text/css"
 href="http://bormat2.free.fr/css/menu-css.css" media="all">
<div class="menu1">
<ul>
  <li><a class="tr" href="http://bormat2.free.fr/">menu
déroulant<!--[if gte IE 7]><!--></a><!--<![endif]-->
    <table>
      <tbody>
        <tr>
          <td>
          <ul>
            <li><a href="http://www.geckozone.org/forum/viewtopic.php?t=73943">menu
dépliant</a></li>
            <li><a
 href="http://bormat2.free.fr/menu+d%E9roulant+compatible+ie6">menu
déroulant</a></li>
          </ul>
          </td>
        </tr>
      </tbody>
    </table>
<!--[if lte IE 6]></a><![endif]--></li>
</ul>
<ul>
  <li><a class="tr" href="http://bormat2.free.fr/ma">menu
déroulant css<!--[if gte IE 7]><!--> </a><!--<![endif]-->
    <table>
      <tbody>
        <tr>
          <td>
          <ul>
            <li><a
 href="http://bormat2.free.fr/menu%20deroulant">menu déroulant</a></li>
            <li><a
 href="http://bormat2.free.fr/menu%20depliant">menu dépliant</a></li>
            <li><a href="http://club.doctissimo.fr/mechan/">mechan</a></li>
          </ul>
          </td>
        </tr>
      </tbody>
    </table>
<!--[if lte IE 7]></a><![endif]--></li>
</ul>
</div>

si vous voulez modifier les image du menu, supprimer déjà ce
qu'il y a en bleu dans mon 1er code sinon vous aurez le même menu que
moi
vous créez ensuite une page css qu'on va appeller menu-css.css  au
même endroit que votre page
mettez ce code dans menu-css.css puis remplacer le code en rouge par l'adresse de vos image
pour approfondir la personnalisation vous pouvez modifier les couleur
c'est le code vert

code:

table {
	margin-right: -15px;
	font-size: 12px;
}
li:hover ul, .menu1 li a:hover ul {
	position: absolute;
	top: 24px;
}
li:hover ul, li, a:hover ul, a {
	display: block;
	float: left;
}
li {
	position: relative;
}
li ul {
	display: none;
}
a:hover a {
	background: #e5ecf7 none repeat scroll 0 0;
}
a:hover a, ul li:hover li {
	width: 132px;
}
ul {
	left: -1px;
	padding: 0;
}
ul, a:hover {
	margin: 0;
}
li a:hover {
	background: #900 none repeat scroll 0 0;
}
.tr:hover {
	background: transparent url('image004.jpg') repeat scroll 0 0;
}
.tr {
	background: transparent url('image002.jpg') repeat scroll 0 0;
	height: 24px;
}
.tr, .ty {
	color: blue;
}
.ty:hover {
	color: red;
}
ul li:hover li {
	background: #e5ecf7;
}