Drop Down Toggle Menu for Webpage

Drop Down Menu code for your web page. This drop-down menu is handy for a responsive web page. Where you want to place a drop-down menu, you can place the menu in that location. If you don't use the horizontal menu at the top of your page you can use the simple toggle drop-down menu in any top corner of your web page. And connect another page link to the menu and access the page very easily.

That drop-down menu has CSS and javascript code. I will give the CSS, JavaScript, Jquery plugin, and Html below

JQuery

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Java Script

$(document).ready(function(){
    $(".account").click(function(){
        var X=$(this).attr('id');
        if(X==1){
            $(".submenu").hide();
            $(this).attr('id', '0'); 
        }
        else{
            $(".submenu").show();
            $(this).attr('id', '1');
        }
    });
    //Mouseup textarea false
    $(".submenu").mouseup(function(){
        return false
    });
    $(".account").mouseup(function(){
        return false
    });
    //Textarea without editing.
    $(document).mouseup(function(){
        $(".submenu").hide();
        $(".account").attr('id', '');
    });
});

CSS

div.dropdown {
    color: #555;
    margin: 3px -22px 0 0;
    width: 143px;
    position: relative;
    height: 17px;
    text-align: left;
}
div.submenu {
    background: #fff;
    position: absolute;
    top: -12px;
    left: -20px;
    z-index: 100;
    width: 135px;
    display: none;
    margin-left: 10px;
    padding: 40px 0 5px;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
.dropdown  li a {
    color: #555555;
    display: block;
    font-family: arial;
    font-weight: bold;
    padding: 6px 15px;
    cursor: pointer;
    text-decoration: none;
}
.dropdown li a:hover {
    background: #00a74f;
    color: #FFFFFF;
    text-decoration: none;
}
a.account {
    font-size: 14px;
    line-height: 20px;
    color: #555;
    position: absolute;
    z-index: 110;
    display: block;
    padding: 0;
    height: 28px;
    width: 121px;
    cursor: pointer;
}
.app-bg {
    background-image: url('https://lh4.googleusercontent.com/-cVGGEuHeOy8/VBln1x33FmI/AAAAAAAAASI/gJ3aW6wZ7Qg/s20/burger.png');
    background-repeat: no-repeat;
    padding: 2px 0 4px 25px;
}
.root {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 11px;
    padding: 11px 0 0 0;
    border-top: 1px solid #dedede;
}

HTML

<div class="dropdown">
    <a class="account">
        <span class="link-icon app-bg"></span><span>MENU</span>
    </a>
    <div class="submenu" style="display: none;">
        <ul class="root">
            <li><a href="http://www.gookeys.in/apps" >Apps</a></li>
            <li><a href="http://www.gookeys.in/books" >Books</a></li>
            <li><a href="http://www.gookeys.in/games">Games</a></li>
            <li><a href="http://www.gookeys.in/movie">Music</a></li>
            <li><a href="http://www.gookeys.in/news">News</a></li>
            <li><a href="http://www.gookeys.in/shopping">Shopping</a></li>
            <li><a href="http://www.gookeys.in/softwares">Softwares</a></li>
            <li><a href="http://www.gookeys.in/videos">Videos</a></li>
        </ul>
    </div>
</div>