Pure CSS Drop Menu

This pure CSS menu has a delay before the menu is displayed and fades out when you exit the menu.

by rustyjeans

HTML

<ul class="nav">
    <li>Menu 1
        <ul>
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 2</a></li>
            <li><a href="#">Item 3</a></li>
        </ul>
    </li>
    <li>Menu 2
        <ul>
            <li><a href="#">Item 4</a></li>
            <li><a href="#">Item 5</a></li>
            <li><a href="#">Item 6</a></li>
        </ul>
    </li>
</ul>

CSS

.nav {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.nav > li {
    display: inline-block;
    padding: 5px;
    margin-right: 5px;
    background-color: #eee;
}

.nav li ul {
    position: absolute;
    list-style-type: none;
    margin: 0;
    padding: 0;

   	visibility: hidden;
	opacity: 0;

    /* CSS transition to delay it's display, as well as
       having it fade out */
    
	transition: visibility 0s linear 0.5s, opacity 0.5s linear;
	-moz-transition: visibility 0s linear 0.5s, opacity 0.5s linear;
	-webkit-transition: visibility 0s linear 0.5s, opacity 0.5s linear;
	-o-transition: visibility 0s linear 0.5s, opacity 0.5s linear;
}

.nav > li:hover ul {
    visibility: visible;
    opacity: 1;
}

.nav li li a {
    text-decoration: none;
    display: block;
    width: 100px;
    padding: 5px;
    background-color: #ccc;
}

JavaScript

// PURE CSS