Simple Inline Dropdown List Plugin with jQuery

A small jQuery plugin which allows you to append a pretty inline dropdown list to any Html elements. Standalone dropdown is supported as well.

How to use it:

1. Create an inline dropdown using Html list.

<p>Web
  <ul class="dropdown">
    <li>Design
      <ul class="menu">
        <li>Jquery</li>
        <li>Javascript</li>
        <li>Html5</li>
        <li>CSS3</li>
      </ul>
    </li>
  </ul>
resources.</p>

2. The CSS to style the dropdown list.

ul,
li { list-style: none; }

.dropdown {
  margin: 0;
  padding: 0;
  display: inline;
  position: relative;
}

.dropdown > li {
  background: #fff;
  padding: 0;
  border-radius: 2px;
  display: inline-block;
  position: relative;
  cursor: pointer;
  font-weight: 700;
}

.dropdown > li:after {
  content: '\25BC';
  font-size: .75em;
  margin-left: -3px;
}

.dropdown > li ul {
  background: inherit;
  border: 1px solid #aaa;
  margin: 0;
  border-radius: 4px;
  position: absolute;
  top: 30px;
  left: 0;
  min-width: 100px;
  padding: 5px;
  border-radius: 3px;
  -webkit-box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.25);
  box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.25);
}

.dropdown > li ul li {
  background: inherit;
  padding: 6px 12px;
  border-top: 1px solid #ccc;
  color: #333;
  white-space: nowrap;
  font-weight: 400;
}

.dropdown > li ul li:first-child { border-top: none; }

.dropdown ul { display: none; }

.show-child ul {
  display: block;
  z-index: 9;
}

3. Include the jQuery library at the bottom of the web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

4. A little Javascript to enable the dropdown list.

(function (jQuery) {
  jQuery.mark = {
    dropdown: function (options) {
      var defaults = {
        selector: '.dropdown > li'
      };
      if (typeof options == 'string') defaults.selector = options;
      var options = jQuery.extend(defaults, options);
      return jQuery(options.selector).each(function () {
        var dropobj = jQuery(this);
          var thelot = jQuery('.dropdown > li');
          dropobj.click(function(event) {
            thelot.not(dropobj).removeClass('show-child');
            dropobj.toggleClass("show-child");
        });
      })
    }
  }
})(jQuery);

jQuery(function(){  
  jQuery.mark.dropdown();
});

---

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