DOMANDA Domanda su menu web

[jumpy83]

Buonasera a tutti ho una domanda.

Ho trovato in giro sul web un menu orizzontale fatto con CSS, HTML.


visibile qui: http://www.loasidelweb.netsons.org/proof/proof.html.


il codice HTML di questo menu è:

<nav class="nav">
    <ul>
         <li class="nav li"><a href="#"><div>Home</div></a></li>
         <li class="nav li"><a href="#"><div><i class="fa fa-database"></i></div><div>Last sample</div></a></li>
         <li class="nav li"><a href="#"><div><i class="fa fa-table"></i></div><div>Last sample</div></a></li>
         <li class="nav li"><a href="#"><div><i class="fa fa-history"></i></div><div>Last sample</div></a></li>
         <li class="nav li"><a href="#"><div><i class="fa fa-info"></i></div><div>Last sample</div></a></li>
         <li class="nav li"><a href="#"><div ><i class="fa fa-folder"></i></div><div>Last sample</div></a>
         <ul>
           <li class="nav ul"><a href="#"><div><i class="fa fa-desktop fa-1x"></i></div><div>Design</div></a></li>
           <li class="nav ul"><a href="#"><div><i class="fa fa-cog fa-1x"></i></div><div>Development</div></a></li>
           <li class="nav ul"><a href="#"><div><i class="fa fa-code fa-1x"></i></div><div>Graphics</div></a></li>
        </ul>
        </li>
         <li class="nav li"><a href="#"><div><i class="fa fa-clock-o"></i></div><div>Last sample</div></a></li>
                
    </ul>
</nav>

il CSS:

.nav {
    background-color:#39C;
    width:auto;
    }
 
.nav ul {
    margin:0;
    padding:0;
    }
 
.nav ul li {
    list-style:none;
    display:inline-block;
    margin:0;
    }
 
.nav ul li a {
    display:block;
    text-decoration:none;
    text-align:center;
    padding:10px 30px 10px 30px;
    color:#333;
    font-size:18px;
    font-family:Arial, Helvetica, sans-serif;
    transition: color 0.5s, background 0.5s;
    -webkit-transition: color 0.5s, background 0.5s; /* Safari */
    }   
     
.nav ul li:hover a {    
    color:#efefef;
    padding-bottom:10px;
    background-color:#105476;
    transition: color 0.5s, background 0.5s;
    -webkit-transition: color 0.5s, background 0.5s; /* Safari */
    }
    .nav ul li ul {
    display:none;
    }   
     
.nav ul li:hover ul {
    z-index:4;
    position:absolute;
    display:block;
}   
 
.nav ul li ul
{
    position:relative;       
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.nav ul li ul:before, .nav ul li ul:after
{
    content:"";
    position:absolute; 
    z-index:2;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:50%;
    bottom:0;
    left:10px;
    right:10px;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
}
 
.nav ul li ul li {
    list-style:none;
    display:block;
    float:none;
    }
 
.nav ul li ul li:hover a {  
    color:#105476;
    padding-bottom:10px;
    background-color:#efefef;
    transition: color 0.5s, background 0.5s;
    -webkit-transition: color 0.5s, background 0.5s; /* Safari */
    }
 
.nav ul li ul li {}
 
.nav ul li ul li a {
    padding:5px 15px 5px 15px;
    text-align:left;
    }
 
.nav ul li ul li a i {
    min-width:20px;
    padding-right:10px;
    }
.nav li > a:after { content: ' >'; }
 
   
.nav > li > a:after {content: ' »'; } 
 
  
.nav li > a:only-child:after {content: ''; }


  .fa{
            font-size: 40px;
            line-height: 70px;
        }
        .fa-bars{
            color: #3498db;
            }

Vorrei sapere se è possibile fare in modo che le voci di sottomenu vengano visualizzate solo quando io clicco alla voce principale e non al passaggio del mouse.
Voglio ottenere questo perché quando inserisco il menu nel sito passando il mouse le voci di sottomenu compaiono ma se tento di cliccarne una scompaiono velocemente.
Cosa che non fa nel link che vi ho inserito sopra.


Grazie :)

 

[Tinwor]

Si certo se avessi guardato meglio la pagina avresti scoperto che è presente anche uno script js(jquery per la precisione)

 

[jumpy83]

Si certo se avessi guardato meglio la pagina avresti scoperto che è presente anche uno script js(jquery per la precisione)

e dunque?
il codice che ho postato è solo quello riguardante il menu.
come vedi dal link al sito, tale js è inserito altrimenti non si vedrebbe proprio il menu. o no?

[EDIT] ah tu mi dicevi di andare a fare modifica in quel js?