Dropdown Menu With a long reveal time

Dropdown Menu With a long reveal time

by Matthew Dewhurst

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<nav>
<div class="wrapper">
    <ul> 
        <li><a href="#">Home</a></li><li>
        <a href="#">About us</a></li><li class="clickSlide">
        <a href="javascript:void(0)">Services <span>&#x25BC;</span></a>
            <ul>
                <li><a href="#">Web hosting</a></li>
                <li><a href="#">Web builder</a></li>
                <li><a href="#">Themes</a></li>
            </ul>
        </li><li>
        <a href="#">Social links</a></li><li>
        <a href="#">Contact</a></li><li>
        <a href="#">Hire us</a></li>
    </ul>
</div>
</nav>

CSS

body{ font-family: Arial; font-size: 15px; font-weight: bold; text-transform: uppercase; padding: 0; margin: 0; overflow-y: scroll; background-color: #F0F0F0; }
nav{ background-color: #293134; margin: 10px 0 0 0; }
.wrapper{ width: 960px; margin: 0 auto; text-align: center; }
nav ul{ list-style-type: none; padding: 0; margin: 0; }
nav ul li{ display: inline-block; width: 155px; }
nav ul li span{ margin: 0 0 0 7px; }
nav ul li a,visited{ display: block; padding: 15px; color: #FFF; text-decoration: none;
    transition: all .1s ease-in-out;
    -o-transition: all .1s ease-in-out;
    -webkit-transition: all .1s ease-in-out;
    -moz-transition: all .1s ease-in-out;
}
nav ul li a:hover{ color: #F46F4F; }

.dropdown-active{ background-color: #000; }
.dropdown-active a,visited{ color: #F46F4F; }
nav ul ul{ position: absolute; background-color: #000; }
nav ul ul li{ display: block; }

JavaScript

$(document).ready(function(){
    
    // NAV TOGGLE ONCLICK WITH SLIDE
    $(".clickSlide ul").hide();
    $(".clickSlide").click(function(){
        $(this).children("ul").stop(true,true).slideToggle( 2000 ),
        $(this).toggleClass("dropdown-active");
    });
    
});