Pagina 1 di 2 1 2 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 14
  1. #1
    Utente di HTML.it
    Registrato dal
    Feb 2011
    residenza
    Firenze
    Messaggi
    255

    Menu a tendina che scompare soltanto con i bordi

    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?

  2. #2
    Utente di HTML.it L'avatar di sgogghy
    Registrato dal
    Sep 2010
    Messaggi
    237
    Se il sottomenu ha un position:absolute relativo all'elemento "padre", assegna un valore a "top" in modo che vada sopra al bordo

  3. #3
    Utente di HTML.it
    Registrato dal
    Feb 2011
    residenza
    Firenze
    Messaggi
    255
    Ho provato ma non ha funzionato, magari avrò sbagliato procedura.
    Il codice è il seguente:
    codice:
    #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>
    Ultima modifica di Fix87; 12-11-2014 a 23:29

  4. #4
    Utente di HTML.it L'avatar di sgogghy
    Registrato dal
    Sep 2010
    Messaggi
    237
    mi serve il codice html e il relativo css per capirlo, basta anche l'indirizzo internet se è online.

  5. #5
    Utente di HTML.it
    Registrato dal
    Feb 2011
    residenza
    Firenze
    Messaggi
    255
    Eh purtroppo ancora non è online, posto il codice del menu e dei relativi css.

    HTML
    codice 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
    codice:
    #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;
    }

  6. #6
    Utente di HTML.it L'avatar di sgogghy
    Registrato dal
    Sep 2010
    Messaggi
    237
    Scusa ma io non vedo nessun border..
    Cmq in questo caso credo basti dare un margin-top -5px

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

  7. #7
    Utente di HTML.it
    Registrato dal
    Feb 2011
    residenza
    Firenze
    Messaggi
    255
    Si ora non c'è perché non funzionando l'ho tolto, comunque il border è qui
    codice:
    #nav{
      background-color:#90a583;
      margin-bottom:40px;
      border: 1px solid #f00;
    }
    Ora provo e vedo

  8. #8
    Utente di HTML.it
    Registrato dal
    Feb 2011
    residenza
    Firenze
    Messaggi
    255
    mmmm purtroppo non va bene perché avevo già messo il magin-top: 5px; quindi se rimetto il margin-top:-5px; si annullano

  9. #9
    Utente di HTML.it L'avatar di sgogghy
    Registrato dal
    Sep 2010
    Messaggi
    237
    Devi tenere solo il -5px...

  10. #10
    Utente di HTML.it
    Registrato dal
    Feb 2011
    residenza
    Firenze
    Messaggi
    255
    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

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.