Rozwijane menu w Bok

[Boshi]

Przepraszam za post pod postem, ale nie wiem czy ktoś będzie widział edycję.

Zrobiłem jednak troszkę inaczej, tzn menu wyświetlane jest pod jednym z linków. Problem jest taki, że jeżeli zjadę kursorem z submenu to natychmiast ono się zamyka, a np aby najechać na linka pod submenu, to trzeba najpierw jest zamknać a potem dopiero mozna wcisnąć. Myślałem nad przejściem, ale za cholery nie mogę go wykonać na tym sub menu aby rozwijało i zwijało się np z opóźnieniem.
Struktura HTML wygląda tak jak wcześniej.
CSS
Dodam stronę na serwerze(polecam w oprzerze/chrome na tę chwilę bo ff coś szaleje)
http://moje-testy.opx.pl/modele.html
I jeżeli może ktoś mniej więcej ocenić jak taka strona wygląda? (robiona dla siebie, pierwsza strona)

Kod:

#menu{
float:left;
background-color:black;
width:200px;  
padding:0;
border-radius:25px;
border-right:2px solid red;
margin-top:4px;

}


/*stylizacja menu*/
ul, li{
padding:0;
margin:0;
list-style-type:none;    
border-radius:30px;




}

ul{
border:1px solid #660000 ;
background: #2b2b2b; /* Old browsers */
background: -moz-linear-gradient(top,  #2b2b2b 4%, #1c1c1c 9%, #131313 16%, #131313 19%, #111111 45%, #2c2c2c 52%, #161616 68%, #161616 73%, #000000 97%, #4c4c4c 98%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(4%,#2b2b2b), color-stop(9%,#1c1c1c), color-stop(16%,#131313), color-stop(19%,#131313), color-stop(45%,#111111), color-stop(52%,#2c2c2c), color-stop(68%,#161616), color-stop(73%,#161616), color-stop(97%,#000000), color-stop(98%,#4c4c4c)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #2b2b2b 4%,#1c1c1c 9%,#131313 16%,#131313 19%,#111111 45%,#2c2c2c 52%,#161616 68%,#161616 73%,#000000 97%,#4c4c4c 98%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #2b2b2b 4%,#1c1c1c 9%,#131313 16%,#131313 19%,#111111 45%,#2c2c2c 52%,#161616 68%,#161616 73%,#000000 97%,#4c4c4c 98%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #2b2b2b 4%,#1c1c1c 9%,#131313 16%,#131313 19%,#111111 45%,#2c2c2c 52%,#161616 68%,#161616 73%,#000000 97%,#4c4c4c 98%); /* IE10+ */
background: linear-gradient(to bottom,  #2b2b2b 4%,#1c1c1c 9%,#131313 16%,#131313 19%,#111111 45%,#2c2c2c 52%,#161616 68%,#161616 73%,#000000 97%,#4c4c4c 98%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2b2b2b', endColorstr='#4c4c4c',GradientType=0 ); /* IE6-9 */




}


li ul{
display:none;

}


li:hover ul {
display:block;
margin-top:10px;
margin-bottom:10px;
border:none;



}



li:hover ul a {
font-size:10px;
background-color:#800;
border-radius:25px;
border:2px double black;
margin:10px;
brder:none;
}

ul>li:first-child
{
  border-top:none;
  
  
}

ul li a
{
    display:block;
    font-size:1em;
    color:white;
    text-decoration:none;
    text-align:center;
    padding:2px;
    cursor:pointer;
    transition-duration:300ms;
    transition-timing-function:linear;
        
    }
    
    
    ul li a:visited{
    color:white;
    }
    ul li a:active{
     color:blue;
    }
    
    ul li a:hover{
    background-color:#800;
    margin-left:2px;
    border-radius:30px;
    box-shadow:0 0 4px 3px white ;
    color:white;
    }