Problema con submenu!!! Ayuda Por favor!!

Buenas, necesitaría saber si alguien me puede ayudar a resolver un pequeño problema que tengo con el submenu de mi web. El tema es el siguiente, cuando yo aprieto en el link de mi menú que tiene a su vez un submenu, éste se despliega bien pero me deja solo apretar la opción 1 de mi submenu, cuando quiero seleccionar la opción 2 u otra, enseguida se me esconde el submenu, sin dejarme recorrer las otras opciones.
Espero haberme explicado bien y que alguien pueda ayudarme!!

De antemano gracias!!

El código de mi menú en HTML es el siguiente:

<div id="nav">
<ul class="principal">
<li><a href="index.html">Home</a></li>
<li><a href="nosotros.html">Nosotros</a></li>
<li><a href="servicios.html">Servicios</a>
<ul class="submenu">
<li><a href="#">Diseño Gráfico</a></li>
<li><a href="#">Desarrollo Papeleria</a></li>
<li><a href="#">Imprenta</a></li>
</ul>
</li>
<li><a href="#">Tu Logo</a></li>
<li><a href="#">Sublimación y Estampado</a></li>
<li><a href="#">Ploteo en Vinilo</a></li>
<li><a href="#">Clientes</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</div>
</div>

El código de mi menú en CSS es el siguiente:

#nav{background-color:#333; filter: alpha(opacity=70); opacity:0.7;
width:100%; height:70px; font-family:Amethyst, Tunga, Toledo; font-size: 1.4Em; }

.principal li{
float: left ;
position:relative;
display:inline;
margin: 20px 0px 0px 25px;
border-right: solid 3px; color:white; padding-right: 30px;
list-style:none; }


#nav li:hover ul { visibility: visible;}

ul.submenu {display: block ;
visibility: hidden;
position: absolute ;
right: -6px;}

Juju muy facil amigo mira tu codigo esta de la siquiente manera :

<div id="nav">
<ul class="principal">
<li><a href="index.html">Home</a></li>
<li><a href="nosotros.html">Nosotros</a></li>
<li><a href="servicios.html">Servicios</a>
<ul class="submenu">
<li><a href="#">Diseño Gráfico</a></li>
<li><a href="#">Desarrollo Papeleria</a></li>
<li><a href="#">Imprenta</a></li>
</ul>
</li> ! este li sobra 
<li><a href="#">Tu Logo</a></li>
<li><a href="#">Sublimación y Estampado</a></li>
<li><a href="#">Ploteo en Vinilo</a></li>
<li><a href="#">Clientes</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</div>
</div>este div no se derrepente cierra otra etiqueta verificalo

y esta mal debe estar de esta forma:

<div id="nav">
<ul class="principal">
<li><a href="index.html">Home</a></li>
<li><a href="nosotros.html">Nosotros</a></li>
<li><a href="servicios.html">Servicios</a>
<ul class="submenu">
<li><a href="#">Diseño Gráfico</a></li>
<li><a href="#">Desarrollo Papeleria</a></li>
<li><a href="#">Imprenta</a></li>
</ul>
<li><a href="#">Tu Logo</a></li>
<li><a href="#">Sublimación y Estampado</a></li>
<li><a href="#">Ploteo en Vinilo</a></li>
<li><a href="#">Clientes</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</div>
</div> 

Gracias Geanco!! Voy a probar si esto da solución a mi problema!! Gracias por el tiempo q te tomaste para ver mi código!