Menu a discesa e menu Passa il mouse (sottomenu)

Sezione di Istanbul a destra pulldown un menu al passaggio del mouse come faccio?

inserisci la descrizione dell'immagine qui

 

    Puoi fare questo menu a tendina con CSS

    Questo è un esempio semplice come fare. In primo luogo, aggiungi class per sapere di quale livello si tratta.

     

      Secondo, aggiungi css per il passaggio del mouse su questo elemento, fai qualcosa a suo figlio

       ul.firstLevel li:hover > ul 

      Quindi, aggiungi colors, transizioni, …

       ul.secondLevel { display: none; } ul.firstLevel li:hover > ul { display: block } 
        

      Il codice che ti serve è:

      HTML:

        

      CSS:

        * { margin: 0; padding: 0; } body { font: 300 15px/1.5 "Helvetica Neue", helvetica, arial, sans-serif; background: #333; margin: 15px; } article { width: 600px; margin: 0 auto; background: #000; color: #fff; border-radius: 5px; box-shadow: 0 0 15px 2px #666; } section { clear: left; } h1 { font-size: 45px; font-weight: 100; letter-spacing: 15px; text-align: center; } h1, #main_content, #dog_link { padding: 15px; } p { margin: 15px 0; } a { color: #06c; } #main_nav ul { background: white; float: left; -webkit-transition: .5s; transition: .5s; } #main_nav li { float: left; position: relative; width: 150px; list-style: none; -webkit-transition: .5s; transition: .5s; } #main_nav > ul > li > a, h1 { text-transform: uppercase; } #main_nav a { display: block; text-decoration: none; padding: 5px 15px; color: #000; } #main_nav ul ul { position: absolute; left: 0; top: 100%; visibility: hidden; opacity: 0; } #main_nav ul ul ul { left: 100%; top: 0; } #main_nav li:hover, #main_nav li:hover li { background: #ddd; } #main_nav li li:hover, #main_nav li li:hover li { background: #bbb; } #main_nav li li li:hover { background: #999; } #main_nav li:hover > ul { visibility: visible; opacity: 1; } 

      JSFiddle: https://jsfiddle.net/szs4Lapn/1/

      Secondo me, il link che ti ho dato sul commento lo spiega molto bene. In effetti sono arrivato a questa soluzione, dopo aver letto quel post. Si prega di lasciare un commento per farmi sapere se ero disponibile. 🙂

      link: