Problema Sottomenu

[Oswold]

Salve a tutti, ho questo codice:

#menu {
    width: 400px;
    margin: 150px auto;
}
 
#menu ul {
    padding: 0;
    margin: 0;
}
 
#menu li {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0 5px;
 
?   -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
}

#menu li a {
    width: 155px;
    line-height: 40px;
    padding: 5px 13px;
    display: block;
    text-decoration: none;
    text-align: center;
    background-color: #222222;
    color: white;
}
 
#film { background: url("img/rss.png") no-repeat no-repeat ; }
#telefilm { background: url("img/rss.png") no-repeat no-repeat 10px 7px; }
#manga { background: url("img/sezioni.png") no-repeat 10px 7px; }
 
 
#film:hover { 
    border-bottom: 3px solid #32CD32;  
}
 
#telefilm:hover { 
    border-bottom: 3px solid #FFA500; 
}
 
#manga:hover { 
    border-bottom: 3px solid #FFFF00; 
}


// Effetti Speciali

#menu li a:hover{
    text-shadow: 0px 0px 1px #FFF;
    background-color: #000000;
}
 
#menu ul li:hover {
    transform: scale(1.1, 1.1);
    -ms-transform: scale(1.1, 1.1); /* IE 9 */
    -webkit-transform: scale(1.1, 1.1); /* Safari and Chrome */
}

#menu ul ul {
    position: absolute;
    top: 0px;
    right: -1px;
    visibility: hidden;
}
 
#menu ul li:hover ul{
    visibility: visible;
}
 
#menu ul li ul li:before {
    content: "";
    border-color: transparent #000000 transparent transparent;
    border-style: solid;
    border-width: 13px;
    height: 0px;
    width: 0px;
    position: absolute;
    left: -8px;
    top: 38px;
    z-index: -1;
}
 
#menu ul li ul li:after {
    content: "";
    border-color: transparent  transparent transparent #000000;
    border-style: solid;
    border-width: 13px;
    height: 0px;
    width: 0px;
    position: absolute;
    right: -8px;
    top: 38px;
    z-index: -1;
}

Funziona tutto perfettamente ma...

Il menù è di questo genere:

1 - Elemento 1
2 - Elemento 2
3 - Elemento 3

Dove alla destra di ogni elemento si apre un sottomenu, il problema è che ogni menù si apre anche se non passo il mouse sopra il pulsante, basta che passi nelle vicinanze di esso sulla destra, ciò mi impedisce di scorrere gli elementi di "Elemento 1" in quanto si apre il menù "Elemento 2" e vale lo stesso per elemento 3...

Adesso mi chiedo se il problema sia il settaggio di visibility in hidden, esiste qualche altro comando oppure ho sbagliato qualcosa?

 

[Max 1]

Per capire il problema sarebbe utile un link alla pagina per vederlo in funzione

 

[Oswold]

Risolto il problema anche se in modo molto rudimentale, grazie ugualmente!