Menu dynamique en CSS (No JavaScript)

Demo

Oui, c'est possible, et sans du javascript :)

Le Principe est simple, il faut faire appel a une technique un peu bizarre mais qui marche: l'imbrication.

L'imbrication: mettre une chose dans une autre chose.

Ma définition: l'imbrication pour moi est de mettre une chose dans une autre chose quand on pense que c'est impossible !!!!!!!!!!!!? :)

Par exemple: mettre un hover dans un autre hover, ou bien faire appel a un hover quand on a fait un appel à un premier hover. (je sais c'est compliquer)

je vais vous expliquer: hover est l'action quand on met la souris sur un block, et comme le hover ne s'affiche pas tous le temps on a:

• souris sur le block= hover =1
• souris non sur block= hover=0

ça vous dit quelque chose ? et ben oui on a inventer le if :)
Donc on va utiliser le hover comme un if,  par exmeple:
block0 a { background-color: noir}

block0:hover a { background-color: rouge }

Demo if hover

Exemple de code:

le code HTML:

<ul class="menu">
    <li ><a href="http://c-lien.blogspot.com/?I21lbnUuaHRtbA==">Menu</a>
          <ul>
          <li><a href="http://c-lien.blogspot.com/?I1NvdXNNZW51Lmh0bWw=">SousMenu</a></li>
          <li><a href="http://c-lien.blogspot.com/?I1NvdXNNZW51Lmh0bWw=">SousMenu</a></li>
          <li><a href="http://c-lien.blogspot.com/?I1NvdXNNZW51Lmh0bWw=">SousMenu</a></li>
          </ul>
    </li>
</ul>



Le code Css:



.menu, ul ul {
    padding:0;
    margin:0;
    border:0;
    list-style-type:none;
    width:200px;
    position: relative; (merci Falco)
}

.menu {
    margin:0 auto;
}

.menu li {
    text-indent:10px;
}



.menu li a {
    display:block; /* http://www.alsacreations.com/actu/lire/111-display-vous-connaissez.html */
    width:200px;
    height:30px;
    line-height:30px;
    text-decoration:none; /* pour enlever le sous ligne dans le lien*/
    color:black;
    background-color:green;
}

.menu li ul {
    display:none; /* pour que les sous menu n'apparaissent  pas*/
}

.menu li a:hover {
    border:0;
    color:#fff;
    font-weight:bold;
    height:30px;
}

.menu li:hover ul, .menu li a:hover ul {
    display:block;
    height:auto;
    width:185px;
    margin-top:-1px;
    position: absolute; (merci Falco)
}

.menu li:hover ul li a, .menu li a:hover ul li a {
    height:30px;
    background-color:blue;
    color:red;
    font-weight:normal;
}

.menu li:hover ul li:hover a, .menu li a:hover ul li a:hover {
    background-color:yellow;
    color:black;
    font-weight:bold;
}


Demo