Menu a tendina che scompare soltanto con i bordi

[Fix87]

Buonasera a tutti,
ho creato un menu orizzontale con una voce che si espande.
Al momento tutto funziona perfettamente, ma se ad esempio inserisco i bordi intorno intorno al menu la voce secondaria che compare scompare quando vado con il mouse su di essa, o meglio, scompare nel passaggio tra la voce principale e la sottovoce. Mi sono accorto che il problema è proprio il bordo e passando su questo perde l'over.
Come potrei fare per non far perdere l'over?

[sgogghy]

Se il sottomenu ha un position:absolute relativo all'elemento "padre", assegna un valore a "top" in modo che vada sopra al bordo

[Fix87]

Ho provato ma non ha funzionato, magari avrò sbagliato procedura.
Il codice è il seguente:

#nav{
  ...
  border:1px solid #f00;
  ...
}
...
...
...
ul li:hover ul{
  display:block;
  position:absolute;
  top: 10;
}

L'ho inserito al posto giusto il valore?

Praticamente ho notato che è proprio quell'1 pixel di bordo che si interpone tra il <li> e il suo sottomenu <ul> che fa perdere il focus sul <li>

[sgogghy]

mi serve il codice html e il relativo css per capirlo, basta anche l'indirizzo internet se è online.

[Fix87]

Eh purtroppo ancora non è online, posto il codice del menu e dei relativi css.

HTML

<div id="nav">  
  <ul>
    <li><a href="#">HOME</a></li>
    <li><a href="video.php">VIDEO</a></li>
    <li><a href="portfolio.php">PORTFOLIO</a>
      <ul>
        <li><a href="album.php">ALBUM</a></li>
      </ul>
    </li>
    <li><a href="about.php">ABOUT</a></li>
    <li><a href="contatti.php">CONTATTI</a></li>
  </ul>
<div style="clear:both;"></div>
</div><!--Fine div nav-->

CSS

#nav{
  background-color:#90a583;
  margin-bottom:40px;
}

ul li{
  float: left;
}

ul li a{
  display: block;
  color: #313131;
  font-size: 12px;
  text-decoration: none;
  width: 196px;
  text-align: center;
  transition-property: background-color, color;
  transition-duration: 500ms;
  -webkit-transition-property: background-color, color;
  -webkit-transition-duration: 500ms;
  padding: 9px 0;
}

ul li ul{
  display: none;
  position: absolute;
}

ul li a:hover{
  background-color: #77886d;
  color: #fff;
}

ul li:hover ul{
  display: block;
}

ul li ul li{
  margin-top: 5px;
  background-color: #90a583;
}

[sgogghy]

Scusa ma io non vedo nessun border..
Cmq in questo caso credo basti dare un margin-top -5px

ul li:hover ul{
display: block;
margin-top:-5px;
}

[Fix87]

Si ora non c'è perché non funzionando l'ho tolto, comunque il border è qui

#nav{
  background-color:#90a583;
  margin-bottom:40px;
  border: 1px solid #f00;
}

Ora provo e vedo

[Fix87]

mmmm purtroppo non va bene perché avevo già messo il magin-top: 5px; quindi se rimetto il margin-top:-5px; si annullano

[sgogghy]

Devi tenere solo il -5px...

[Fix87]

No intendevo dire che non va bene perché lo voglio proprio distanziare di 5 pixel il sottomenù dalla barra di navigazione principale. Quindi se inserisco il -5px mi attacca la sottovoce alla voce prncipale