Problema com posicionamento de submenu vertical

[joaohenrique010 0]

Olá! O problema é o seguinte:

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

Como eu quero que fique:

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.

[wilnet 92]

http://jsfiddle.net/wilnet/vx4or97g/3/

[joaohenrique010 0]

Consegui! Prestei bem atenção e no li ul {} tinha que ter top:0;. Valeu!