Menu Modificado

[ilydiego]

hola buenas tarde a todos por aqui tengo duda grandototota tengo un menu desplegable es este y ps yo ya lo domifique y todo ya lo modifique y todo, pero aun detalle, ven que cuando haces clic sobre las opciones el menu se recoge, como podria hacerle para que se quedara asi, y se recoga cuando le de clic sobre el menu el codigo es este

Código HTML:

* { margin: 0px;
padding: 0px; outline: 0;
}
html, body { width: 100%;}

body { background: #9FECFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#menu {  text-align: center;
font-size: 0.8em;
font-weight: bold;
margin: 5px;
}
#menu ul { list-style-type: none;
}
#menu ul li.nivel1 { 
width: 162px;
}
#menu ul li.primera { border-top: solid 1px #FFF;
}
#menu ul li a, #menu ul li span {display: block;
text-decoration: none;
color: #fff;
background-color: #00C2D8;
border: solid 1px #fff;
border-top: none;
padding: 8px;
position: relative;
}
a:active {position: relative;
}
#menu ul li a:active {background-color: #9FECFF;
color: #000;
border-bottom: solid 1px #9FECFF;
position: relative;
}
#menu ul li span.nivel1 {display: block;
}
#menu ul li:hover span.nivel1 {cursor: pointer;
}
#menu ul li ul {display: none;
}
#menu ul li a:hover ul, #menu ul li a:active ul {display: block;
position: relative;width: 162px;background-color: #00C2D8;
}
#menu ul li a:link:hover ul {display: none;
}
#menu ul li a:active:hover ul  {display: block;
}
#menu ul li ul li a {width: 160px;
padding: 6px 0px 8px 0px;
border: none;
border-top:  solid 1px #fff;
background-color: #49DAEA;
font-weight: bold;
}
#menu ul li ul li a:hover {
position: relative;
text-decoration: underline;
border-bottom: none;
color: #000;
background-color: #9FECFF;
}
#menu ul li ul li.primera {border-top: none;
}
table.falsa {border-collapse:collapse;
border:0px;
float: left;
position: relative;
}


grx de antemano