Menu

by paulyabsley

HTML

<nav>
    <ul>
        <li class="nav-home"><a href="#">Home</a></li>
        <li class="nav-menu"><a href="#">Menu</a>
            <ul>
                <li><a href="#">Courses</a>
                    <ul>
                        <li><a href="#">14 &ndash; 19 Year Olds</a></li>
                        <li><a href="#">Adults</a></li>
                        <li><a href="#">Higher Education</a></li>
                    </ul>
                </li>
                <li><a href="http://www.bbc.co.uk/">The College</a></li>
                <li><a href="#">Students</a></li>
                <li><a href="#">News</a></li>
                <li><a href="#">Events</a></li>
                <li><a href="#">Academies</a></li>
                <li><a href="#">Store</a></li>
            </ul>
        </li>
        <li class="nav-search"><a href="#">Search</a></li>
    </ul>
</nav>

CSS

body {
    padding:20px;
    font-family:Arial, Helvetica, Sans-serif;
}

nav {
    background:#333;
    position:relative;
}

a {
    color:#FFF;
    text-decoration:none;
    display:block;
    padding:10px;
}

.nav-home,
.nav-search {
    background:#777;
    text-align:center;
    position:absolute;
    width:12%;
    z-index:2;
    margin-top:1px;
}

.nav-search {
    top:0px;
    right:0;
}

.nav-menu {
    text-align:center;
    position:aboslute;
}

.nav-menu > a {
    border:1px solid #BADA55;
}

ul {
    background:#444;
    overflow:hidden;
}

ul li ul li {
    float:none;
    background:#555;
    border-bottom:1px solid #333;
}

ul li ul {
    display:none;
}

li.open ul {
    display:block;
}

ul li ul li ul li {
    background:#555;
}

ul li.open ul li ul {
    display:none;
}

JavaScript

$(document).ready(function(){
   $("li.nav-menu").click(function(event){
     $(this).toggleClass("open");
     event.stopPropagation()
   });
 });