Dropdown Menu And Hover Menu (sub Menu)

Istanbul section right pulldown a hover menu how do I do it?

Copy

Second, add css for hover of this element, do something to his son

ul.firstLevelli:hover > ul

Then, add colors, transitions, ...

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

<ulclass="firstLevel"><li><ahref="">Birds</a><ulclass="secondLevel"><li><ahref="">Ratites</a></li><li><ahref="">Fowl</a></li><li><ahref="">Neoaves</a></li></ul></li></ul>

Solution 2:

The code you need is:

HTML:

<navid="main_nav"><ul><li><ahref="">Dropdown</a><ul><li><ahref="">example</a><ul><li><ahref="">example1</a></li><li><ahref="">example2</a></li><li><ahref="">example3</a></li></ul></li></ul></li></ul></nav>

CSS:

    * {
        margin: 0;
        padding: 0;
    }
    body {
        font: 30015px/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: 0015px2px#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: 15px0;
    }

    a {
        color: #06c;
    }

    #main_navul {
        background: white;
        float: left;
        -webkit-transition: .5s;
        transition: .5s;
    }

    #main_navli {
        float: left;
        position: relative;
        width: 150px;
        list-style: none;
        -webkit-transition: .5s;
        transition: .5s;
    }

    #main_nav > ul > li > a, h1 {
        text-transform: uppercase;
    }

    #main_nava {
        display: block;
        text-decoration: none;
        padding: 5px15px;
        color: #000;
    }

    #main_navulul {
        position: absolute;
        left: 0;
        top: 100%;
        visibility: hidden;
        opacity: 0;
    }

    #main_navululul {
        left: 100%;
        top: 0;
    }

    #main_navli:hover, #main_navli:hoverli {
        background: #ddd;
    }

    #main_navlili:hover, #main_navlili:hoverli {
        background: #bbb;
    }

    #main_navlilili:hover {
        background: #999;
    }

    #main_navli:hover > ul {
        visibility: visible;
        opacity: 1;
    }

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

In my opinion, the link I gave you on the comment explains it very well. In fact I came up with this solution, after reading that post. Please leave a comment to let me know if I was helpful. :)

Links:

• http://www.htmldog.com/techniques/dropdowns/

• http://www.htmldog.com/examples/dropdowns3/