menu espandibile con i css con sottolivelli

[mediasteno]

Ho bisogno che qualcuno mi dia una mano a perfezionare un menu. Il codice HTML è il seguente:

<script>
    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>

<div>
      <ul id="menu">
         <li><a href="index.php">Home Page</a></li>
         <li><a href="#">L&acute;Azienda</a></li>
         <li><a href="#">Dove siamo</a>
            <ul>
              <li><a href="#">luogo</a></li>
              <li><a href="#">indicazioni</a></li>
            </ul>
         </li>

         <li><a href="dovesiamo.php">Dove Siamo</a></li>
      
         <li><a href="#">Il raccolto</a>
           <ul>
              <li>
                  <a href="#">I Vini</a>
                     <ul>
                         <li><a href="#">vino 1</a></li>
                         <li><a href="#">vino 2</a></li>
                     </ul>
              </li>
           </ul>

        </li>

        <li><a href="#">News</a></li>
        <li><a href="#">Dicono di noi</a></li>
        <li><a href="#">I nostri amici</a></li>
        <li><a href="#">Contattaci</a>
          <ul>
          <li><a href="#">produzione</a></li>
          <li><a href="#">azienda</a></li>
          </ul>
        </li>
     </ul>
</div>

e il foglio di stile collegato è il seguente:

#menu, #menu ul {margin: 0; padding: 0; list-style: none; width: 150px; /* Width of Menu principale */}
#menu {font: bold 18px Georgia, "Times New Roman", Times, serif; color: #666; text-align: center; line-height:200%}
#menu li a {text-decoration: none;  border-bottom: 1px dashed #ccc; color:#666;}

#menu a {display: block; width: 10em;}
#menu li {float:left; width: 10em;}

/*menu di secondo livello   */
#menu ul li {position: relative; border-bottom: 1px dashed #ccc;}
#menu li ul {position: absolute; width: 10em; left: -999em;}
#menu li:hover ul, #menu li.sfhover ul {left:auto;}
#menu ul li ul{position: absolute; width: 100px;  top: 0; visibility: hidden;}

#menu ul li a{display: block; overflow: auto;  font-size:14px; color: red; text-decoration: none; background: #fff; padding: 1px 5px;
              border-bottom: 0;}
#menu ul li a:visited{}
#menu ul li a:hover{background-color: grey; color: #ffffff;}

/* menu di terzo livello */
#menu li ul ul {margin: -1em 0 0 10em;}
#menu li li:hover ul, #menu li li.sfhover ul{left:auto;}
#menu li:hover ul ul, #menu li.sfhover ul ul {left: -999em;}

ora ho due problemi:
1) quando sono con il mouse sopra una voce del menu, si apre il sottomenu, ma il menu principale non si espande rimane fisso. Come posso impostare il css?
2) Volevo aggiungere un ulteriore sottomenu, ma non riesco a visualizzarlo.

In pratica voglio realizzare un menu come nell'immagine

ho cercato su internet ma non ho trovato esattamente un menu che facesse al caso mio, cosi ho cercato di realizzarlo da me, ma ho scarse conoscenze di javascript.

 

[criric]

Ciao,l'idea non è male
devi usare la proprieta display settata a none sui sottomenu e con javascript la imposti a listem-item o inline o block : fai un po di prove per vedere cosa è meglio intanto ho buttato giu due righe ispirandomi al tuo codice, dagli un occhiata

<style>
    a {
        text-decoration: none;
        color:black;

    }
    div {
        width: 220px;
        border:1px solid red;
    }
    ul {
        margin:0;
        padding:0;
        list-style-type: none;
    }
    ul li {        
        border-bottom:1px solid red;
        background-color: #DDD;
        padding:4px;
    }
    ul li ul li {        
        border:none;
        background-color: #FFF;
    }
    ul ul, ul ul ul{
        display: none;
        margin-left:10px;
    }
</style>
<script>
    window.onload = function(){
        
        var liste = document.getElementById('menu').getElementsByTagName('li');
        
        for(var i = 0; i < liste.length; i++) {
            liste[i].onmouseover = function() {
                var submenu = this.getElementsByTagName('ul')[0];
                if(submenu) {              
                    submenu.style.display = "list-item"
                }          
            }
            liste[i].onmouseout = function() {
                var submenu = this.getElementsByTagName('ul')[0];
                if(submenu) {              
                    submenu.style.display = "none"
                }          
            }
        }
    }    
</script>
<div>
    <ul id="menu">
        <li><a href="index.php">Home Page</a></li>
        <li><a href="#">L&acute;Azienda</a></li>
        <li><a href="#">Dove siamo</a>
            <ul>
                <li><a href="#">luogo</a></li>
                <li><a href="#">indicazioni</a></li>
            </ul>
        </li>

        <li><a href="#">Il raccolto</a>
            <ul>
                <li>
                    <a href="#">I Vini</a>
                    <ul>
                        <li><a href="#">vino 1</a></li>
                        <li><a href="#">vino 2</a></li>
                    </ul>
                </li>
            </ul>

        </li>

        <li><a href="#">News</a></li>
        <li><a href="#">Dicono di noi</a></li>
        <li><a href="#">I nostri amici</a></li>
        <li><a href="#">Contattaci</a>
            <ul>
                <li><a href="#">produzione</a></li>
                <li><a href="#">azienda</a></li>
            </ul>
        </li>
    </ul>
</div>

 

[mediasteno]

Grazie dell'aiuto