CSS JQuery Responsive Drop Down

A Responsive Drop Down Menu with CSS and JQuery.

by Naeem Rind

HTML

<label for="show-menu" class="show-menu">Show Menu</label>
	<input type="checkbox" id="show-menu" role="button">
    <ul id="menu">
		<li><a href="#">VC Message</a></li>
		<li>
			<a href="#">Departments &nbsp;<span id="main-nav-arrow">▽</span></a>
			<ul class="hidden">
				<li><a href="#">Faculty of Management Sciences, Business &amp; IT</a></li>
				<li><a href="#">Faculty of Social Sciences</a></li>
				<li><a href="#">Faculty of Education &amp; Humanities</a></li>
				<li><a href="#">Faculty of Literature &amp; Languages</a></li>
				<li><a href="#">Faculty of Basic Sciences</a></li>
				<li><a href="#">Faculty of Life Sciences</a></li>
				<li><a href="#">Faculty of Earth &amp; Environmental Sciences</a></li>
				<li><a href="#">Faculty of Pharmacy And Health Sciences</a></li>
			</ul>
		</li>
		<li>
			<a href="#">Publications &nbsp;<span>▽</span></a>
			<ul class="hidden">
				<li><a href="#">Journals</a></li>
				<li><a href="#">News Letter</a></li>
				<li><a href="#">Reports</a></li>
				<li><a href="#">Prospectus</a></li>
			</ul>
		</li>
		<li><a href="#">Centers</a></li>
		<li><a href="#">Addmission</a></li>
		<li><a href="#">Administration</a></li>
		<li>
			<a href="#" class="link">Convocations &nbsp;<span>▽</span></a>
			<ul class="hidden">
				<li><a href="#" class="link">UoB 13th Convocation</a></li>
				<li><a href="#" class="link">UoB 12th Convocation</a></li>
				<li><a href="#" class="link">UoB 11th Convocation</a></li>
				<li><a href="#" class="link">UoB 10th Convocation</a></li>
				<li><a href="#" class="link">University Law College 11th Convocation</a></li>
				<li><a href="#" class="link">University Law College 10th Convocation</a></li>
			</ul>
		</li>
		<li><a href="#">Library</a></li>
	</ul>

CSS

html {
    width: 100%;
    margin: 0 auto;
}
* {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}
body {
/*    border: 1px solid red;*/
    margin: 0 auto;
    width: 100%;
    max-width: 1020px;
    height: 1000px;
}
#main-menu {
	margin: 0 auto !important;
}

/*Strip the ul of padding and list styling*/
ul {
	list-style-type:none;
	margin:0;
	padding:0;
	position: absolute;
    text-align: center;
    
}

/*Create a horizontal list with spacing*/
li {
	display:inline-block;
	float: left;
	margin-right: 1px;
    text-align: center;
}

/*Style for menu links*/
li a {
	display:block;
	min-width:127px;
	height: 50px;
	text-align: center;
	line-height: 50px;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #dedede;
	background: #4d4d4d;
	text-decoration: none;
    transition: 0.4s;
}

/*Hover state for top level links*/

li:hover a {
	background: #118d61;
}
/*Style for dropdown links*/
li:hover ul a {
	background: #f3f3f3;
	color: #2f3036;
	height: 40px;
    line-height: 40px;
}

/*Hover state for dropdown links*/
li:hover ul a:hover {
	background: #13845d;
	color: #fff;
}

/*Hide dropdown links until they are needed*/
li ul {
	display: none;
    
}

/*Make dropdown links vertical*/
li ul li {
	display: block;
	float: none;
}

/*Prevent text wrapping*/
li ul li a {
	width: auto;
	min-width: 105px;
	padding: 0 20px;
    transition: 0.4s;
}

/*Display the dropdown on hover*/
/*
ul li a:hover + .hidden, .hidden:hover {
	display: block;
}
*/

/*Style 'show menu' label button and hide it by default*/
.show-menu {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-decoration: none;
	color: #fff;
	background: #19c589;
	text-align: center;
	padding: 10px 0;
	display: none;
    margin: 0 auto;
    text-align: center;
    
}

/*Hide checkbox*/
input[type=checkbox]{
    display: none;
    
}


#main-nav-arrow {
    font-size: 1.3em;
}
ul li, li a {
    font-size: 14px;
}
ul li ul {
    min-width: 300px;
}

/*Responsive...

JavaScript

/* Set the width of the side navigation to 250px */
        function openNav() {
            document.getElementById("mySidenav").style.width = "250px";
        }
        /* Set the width of the side navigation to 0 */
        function closeNav() {
            document.getElementById("mySidenav").style.width = "0";
        }
        /* Below Code is for Toggling the Menu Text in Mobile View */
          $(document).ready(function(){
              
            $(".show-menu").click(function(){
                if ($(this).text() == "Show Menu")
                   {
                       $(this).text("Close");    } else 
                       {
                           $(this).text("Show Menu");
                       };
                });
              /* To prevent from jumping to top */
              $('#menu a').on('click', function(e){
                  e.preventDefault(); });

                $("#show-menu").click(function(){
                   $("#menu").slideToggle(); 
                });
             $("#menu li").hover(function(){
                $(this).find("ul.hidden").stop().slideDown(400);
                }, function(){
                $(this).find("ul.hidden").stop().slideUp(400);
                });
          });