Minimalist Dropdown Menu Plugin With jQuery And CSS

File Size: Unknown
Views Total: 5268
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Minimalist Dropdown Menu Plugin With jQuery And CSS

An ultra lightweight jQuery/HTML/CSS based 2-level drop down menu which is easy to embed into your jQuery web project. jQuery is used to toggle CSS classes when you hover over the top level menu.

How to use it:

1. Code a nested html unordered list for the 2-level drop down menu.

<div class="menu-container">
  <ul class="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</a>
        <li><a href="#">Brief</a></li>
        <li><a href="#">Profile</a></li>
  <li><a href="#">Services</a></li>

2. The core CSS styles for the drop down menu.

.menu-container {
  width: 960px;
  height: 50px;
  background: #693D3D;
  margin: 80px auto;
  font-family: corbel;
} li {
  float: left;
  padding: 15px;
  list-style: none;
  width: 80px;
  height: 20px;
  text-align: left;
} li a {
  color: #fff;
  text-decoration: none;
} li:hover {
  color: #fff;
  text-decoration: none;
} ul {
  background: #46211A;
  position: relative;
  top: 15px;
  display: none;
  width: 70px;
  right: 15px;
} ul li {
  float: none;
  position: relative;
  left: -40px;
  padding: 5px 15px 5px 15px;
  border-top: 1px solid #fff;

.current { background-color: #46211A; }

.with-child::after {
  content: '\25be';
  color: #ffffff;

3. Put the following JavaScript snippets after jQuery library.

<script src="//"></script>
$(" li:has(ul)").hover(function(){

$(" > li").hover(function(){

$(" li a:has(ul)").addClass('with-child');

This awesome jQuery plugin is developed by Babscoder. For more Advanced Usages, please check the demo page or visit the official website.