With this JQuery plugin you will be able to create a drop down menu like the one shown in the example below without the need to know JavaScript, only a basic knowledge of HTML and CSS. Documentation is included as a Word document that will guide you through the process of putting a drop down menu on your website. All fonts, colors, sizes and borders are customizable within the CSS.

Example

The HTML

<div id="menu1" class="DMDropDownMenu">
  <a href="#">Item 1</a>
  <div>
    <a href="#">Sub Item 1</a>
    <a href="#">Sub Item 2</a>
    <a href="#">Sub Item 3</a>
    <a href="#">Sub Item 4</a>
    <div>
      <a href="#">Sub Item 1</a>
      <a href="#">Sub Item 2</a>
      <a href="#">Sub Item 3</a>
      <div>
        <a href="#">Sub Item 1</a>
        <a href="#">Sub Item 2</a>
        <a href="#">Sub Item 3</a>
        <a href="#">Sub Item 4</a>
        <a href="#">Sub Item 5</a>
      </div>

The CSS

.DMDropDownMenu#menu1 { margin: 10px 40px 10px 40px;
  border: solid 30px Blue; background: #282828;
  float: left;
}
                          
.DMDropDownMenu#menu1 a { display: block; float: left;
  background: #282828; padding: 5px 37px 5px 38px;
  color: #99CCFF; text-decoration: none;
  font: 12px Arial, Helvetica, sans-serif;
}

.DMDropDownMenu#menu1 a.mouseover { background: White;
  color: Navy;
}
                          
.DMDropDownMenu#menu1 div a { float: none;
  padding: 4px 20px 4px 20px; margin: 5px;
  border: solid 10px Blue; position: relative;
}

.DMDropDownMenu#menu1 div { background:  White;
  padding: 5px; border: solid Black;
  border-width: 0px 76px 3px 17px; margin: 0px;
  visibility: hidden; position: absolute;
  overflow: hidden; white-space: nowrap;
}

The JavaScript

<script type="text/javascript"
  src="jquery-1.2.6.min.js"></script>
<script type="text/javascript"
  src="jquery.dmDropDownMenu.js">
</script>
<script type="text/javascript">
  $("div.DMDropDownMenu").dmDropDownMenu();
</script>