Simple Inline Dropdown List Plugin with jQuery

File Size: 2.07 KB
Views Total: 1769
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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.

  <ul class="dropdown">
      <ul class="menu">

2. The CSS to style the dropdown list.

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="//"></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');


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