Pure CSS drop down menu that's mobile friendly?

[Kavoir]

I tried to implement this one [URLnf=http://www.htmldog.com/articles/suckerfish/dropdowns/]here[/URLnf] But it seems to be outdated and not quite mobile friendly. Any other options?

I need pure css. No Javascript.

 

[Hassan]

Building a basic drop down is easy there are three steps

Step 1. HTML Components

<!-- dropdown container -->
<div class="dropdown">

    <!-- trigger button -->
    <button>Navigate</button>

    <!-- dropdown menu -->
    <ul class="dropdown-menu">
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
</div>

Step 2. Positioning the Menu

.dropdown {
    position: relative;

    /** Make it fit tightly around it's children */
    display: inline-block;
}

.dropdown .dropdown-menu {
    position: absolute;

    /**
     * Set the top of the dropdown menu to be positioned 100%
     * from the top of the container, and aligned to the left.
     */
    top: 100%;
    left: 0;

    /** Allow no empty space between this and .dropdown */
    margin: 0;
}

Step 3. Show and hide menu

/**
 * Apply these styles to .dropdown-menu when user hovers
 * over .dropdown
 */
.dropdown:hover .dropdown-menu {

    /** Show dropdown menu */
    display: block;
}

 

[stanton]

I tried to implement this one here But it seems to be outdated and not quite mobile friendly. Any other options?

I need pure css. No Javascript.

Not only out updated but so simple to apply for a web template if you want to build a website with a professional menu. I suggest you try to g00gle mega menu or pure drop down menu CSS, tons of types of these codes on the search results, click and find a suitable one for you.

good luck.

 

[deadmix]

Hello,

You can check this tutorial : [URLnf="http://blueseodesign.com/jquery-tutoriels/creer-menu-responsive-en-jquery/"]Jquery Responsive Mobile Menu[/URLnf]

Download the source code and play with it in order to build your own menu items..

Goodluck

 

[paul.1309]

for me you have to create two set of menu. 1 is for the desktop view and mobile menu. each one will display according to resolution of devise used.