Sous menu CSS3

Bonjour,

Je souhaiterais réaliser des sous menus mais je rencontre quelques difficultés...
Pouvez-vous m'aider à réaliser, à partir de mon menu (ci-dessous), des sous menus apparaissant lorsque la souris se positionne sur l'élément père ?

Code HTML :

<div id="menu">

<ul>
<li><a href="accueil.php"><img src="images/petit1.fw.png" id="logo"></a></li>
<li><a href="inventaire.php">Inventaire</a></li>
<li><a href="assistance.php">Assistance</a></li>
<li><a href="technicien.php">Technicien</a></li>
<li><a href="contact.php">Administration</a></li>
<li><a href="contact.php">Contact</a></li>
<li><input type="search" id="search" placeholder="Rechercher" size="20"> </li>
</ul>
</div>

Code CSS :

#menu {
width: 1000px;
margin:0px
}

#menu ul {
float: left;
list-style-type: none;
width: 960px;
height: 38px;
background: #e3e3e3;
background: -moz-linear-gradient(top, #ccc, #999);
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#999));
-moz-box-shadow: 1px 1px 3px #333;
-webkit-box-shadow: 1px 1px 3px #333;
box-shadow: 1px 1px 2px #333;
margin:0px;
}

#menu ul a{
display: block;
padding: 10px 20px 10px 20px;
list-style-type: none;
float: left;
color: #454545;
font-size:15px;
text-decoration: none;
}

#menu ul a:hover{
display: block;
padding: 10px 20px 10px 20px;
list-style-type: none;
float: left;
color: #ddd;

text-shadow: 0 1px 0 black;

background: #555;
background: -moz-linear-gradient(top, #444, #555);
background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#555));
}

Ainsi, à partir du code HTML suivant, je souhaiterais faire apparaître les sous menu "Test 1" et "Test 2", au passage de la souris sur l'élément "Inventaire".

<div id="menu">

<ul>
<li><a href="accueil.php"><img src="images/arcelorpetit1.fw.png" id="logoarcelormenu"></a></li>
<li><a href="inventaire.php">Inventaire</a></li>
<ul>
<li><a href="">Test1</a></li>
<li><a href="">Test2</a></li>
</ul>
<li><a href="assistance.php">Assistance</a></li>
<li><a href="technicien.php">Technicien</a></li>
<li><a href="contact.php">Administration</a></li>
<li><a href="contact.php">Contact</a></li>
<li><input type="search" id="search" placeholder="Rechercher" size="20"> </li>
</ul>
</div>

Merci de votre coup de pouce
Modifié par Jeremy60 (02 May 2013 - 09:47)

Bonjour,

Premier élément trouvé sur un moteur de recherche bien connu

Bonjour,
Un peu de JS pour animer tout ça

<script type="text/javascript">

// JavaScript Document

sfHover = function() {
        var sfEls = document.getElementById("menu").getElementsByTagName("LI");
        for (var i=0; i<sfEls.length; i++) {
                sfEls[i].onmouseover=function() {
                        this.className+=" sfhover";
                }
                sfEls[i].onmouseout=function() {
                        this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
                }
        }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>

[/i][/i]

Ce CSS devrait te permettre de commencer (il n'est pas complet du tout par contre)

#menu a:hover {
color:#32cd32;
}

#menu li:hover ul ul, #menu li.sfhover ul ul
{
        left: -999em;
}
 
#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul 
{
        left: auto;
        
        padding-top: 5px;
        min-height: 0;
}