Problema com posicionamento de submenu vertical

Olá! O problema é o seguinte:

Como está: [o ponto vermelho simboliza o lugar onde o mouse estava quando o print foi tirado]

/applications/core/interface/imageproxy/imageproxy.php?img=http://s16.postimg.org/y7jtv47jp/image1.png&key=8c070dbef6b9e41ea2e9e28a4f00fe834587b8b8f3265bf9c3aa6227dca32d37" alt="image1.png" />

Como eu quero que fique:

/applications/core/interface/imageproxy/imageproxy.php?img=http://s17.postimg.org/w6rjg1k4f/image2.png&key=61e6cf892b9efb4242346faf87a2dda576268d7280047b2d7e8e01a26070b93e" alt="image2.png" />

Aquele "BE" que tem ao lado de Hospedagem é de "Bem-vindo", não se preocupem com ele.

HTML/CSS:

<style type="text/css">
ul#nav{list-style:none;margin:0;padding:0;width:15%;border-right:1px solid black;border-top:1px solid white;}ul#nav li a{display:block;padding:8%;text-decoration:none;background:rgba(0,79,152,0.9);color:white;transition:0.15s ease-out;}ul#nav li{position:relative;}ul#nav li ul{width:100%;position:absolute;display:none;left:100%;list-style:none;}
ul#nav li a:hover{background:rgb(0,79,152);}

ul#nav li:hover ul{display:block;}</style><ul id="nav">
 <li><a href="#">Home</a></li>
 <li><a href="#">Sobre</a></li>
 <li><a href="#">O que Fazemos?</a>
 <ul>
 <li><a href="#">Web Design</a></li>
 <li><a href="#">Hospedagem</a></li>
 <li><a href="#">SEO</a></li>
 <li><a href="#">Sistemas</a></li>
 </ul>
 </li>

 <li><a href="#">Contato</a></li>
 </ul>

A questão é: quero reposicionar o submenu de modo que ele comece do lado do elemento em que o mouse está em cima, e não ao lado do elemento abaixo do que o mouse está em cima.

Como resolvo isso?

Obrigado.