Multi Dropdown Menu Hover Pure CSS

Multi Dropdown Menu Hover Pure CSS

by Adi Jaya

HTML

<div class="menu-container">
    <ul class="menu">
        <li class="dropdown-menu">
            <a class="dropdown-toggle" href="#">Hover Me</a>
            <ul class="sub-menu">
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li class="dropdown-menu">
                    <a class="dropdown-toggle" href="#">Link</a>
                    <ul class="sub-menu">
                        <li><a href="#">Link</a></li>
                        <li><a href="#">Link</a></li>
                        <li class="dropdown-menu">
                            <a class="dropdown-toggle" href="#">Link</a>
                            <ul class="sub-menu">
                                <li><a href="#">Link</a></li>
                                <li><a href="#">Link</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
            </ul>
        </li>
        <li><a href="#">Menu 1</a></li>
        <li><a href="#">Menu 2</a></li>
        <li><a href="#">Menu 4</a></li>
    </ul>
</div>


<h3>
Demo Responsive screen min-width 400px
</h3>

CSS

html{
    font-family: sans-serif;
    font-size: 16px;
}

.menu-container {
    position: relative;
}

.menu, .sub-menu {
    margin: 0;
    padding: 0;
    list-style: none;
}

.menu li {
    position: relative;
}

.menu a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
}

.sub-menu {
    display: none;
    padding-left: 1em;
}

.dropdown-toggle {
    color: red;
}

/* move this hover to @media screen if desktop only */
.dropdown-menu:hover > .sub-menu {
    display: block;
}


/* for this demo 400px */
@media screen and (min-width: 400px){
   .menu li {
        display: inline-block;
    }
    .sub-menu {
        position: absolute;
        min-width: 150px;
        background: #fff;
        border: 1px solid silver;
        padding: 0;
    }
    .sub-menu li {
        display: block;
    }
    .sub-menu .sub-menu {
        left: 100%;
        top: 0;
    }
    /* if dekstop only
    .dropdown-menu:hover > .sub-menu {
        display: block;
    }
    */
}