Superfish DropDown Columns

by Ryan Brackett

HTML

<script src="http://users.tpg.com.au/j_birch/plugins/superfish/js/superfish.js"></script>
<link rel="stylesheet" href="http://users.tpg.com.au/j_birch/plugins/superfish/css/superfish.css">
<ul class="sf-menu">
    <li><a href="#">Home</a>
    <ul>
      <li><a href="#">Subitem 0.1</a> </li>
      <li><a href="#">Subitem 0.2</a> </li>
      <li><a href="#">Subitem 0.3</a> </li>
      <li><a href="#">Subitem 0.4</a> </li>
    </ul>
  </li>
  <li class="sfcolumns"><a href="#">Programs &amp; Services</a>
    <ul>
      <li id="col-001">
        <ul>
          <li><a href="#">Subitem 1.1</a> </li>
          <li><a href="#">Subitem 1.2</a> </li>
          <li><a href="#">Subitem 1.3</a> </li>
          <li><a href="#">Subitem 1.4</a> </li>
          <li><a href="#">Subitem 1.5</a> </li>
        </ul>
      </li>
      <li id="col-002">
        <ul>
          <li><a href="#">Subitem 1.6</a> </li>
          <li><a href="#">Subitem 1.7</a> </li>
          <li><a href="#">Subitem 1.8</a> </li>
          <li><a href="#">Subitem 1.9</a> </li>
          <li><a href="#">Subitem 1.10</a> </li>
        </ul>
      </li>
      <li id="col-003">
        <ul>
          <li><a href="#">Subitem 1.11</a> </li>
          <li><a href="#">Subitem 1.12</a> </li>
          <li><a href="#">Subitem 1.13</a> </li>
          <li><a href="#">Subitem 1.14</a> </li>
          <li><a href="#">Subitem 1.15</a> </li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="#">About Us</a>
    <ul>
      <li><a href="#">Subitem 2.1</a> </li>
      <li><a href="#">Subitem 2.2</a> </li>
      <li><a href="#">Subitem 2.3</a> </li>
      <li><a href="#">Subitem 2.4</a> </li>
    </ul>
  </li>
  <li><a href="#">Resources</a>
    <ul>
      <li><a href="#">Subitem 3.1</a> </li>
      <li><a href="#">Subitem 3.2</a> </li>
      <li><a href="#">Subitem 3.3</a> </li>
      <li><a href="#">Subitem 3.4</a> </li>
    </ul>
  </li>
  <li><a href="#">Contact Us</a>
    <ul>
      <li><a href="#">Subitem 4.1</a>...

CSS

/* SF COLUMNS*/
 .sfcolumns ul {
    -webkit-box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0)!important;
    -moz-box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0)!important;
    box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0)!important;
    width: 600px;
    left: 0px;
}
.sfcolumns #col-001 > ul {
    display: block!important;
    visibility: visible!important;
    top: 0px!important;
    left: 0px!important;
    width: 33.33%!important;
}
.sfcolumns #col-002 > ul {
    display: block!important;
    visibility: visible!important;
    top: 0px!important;
    left: 33.33%!important;
    z-index: 1;
    width: 33.33%!important;
}
.sfcolumns #col-003 > ul {
    display: block!important;
    visibility: visible!important;
    top: 0px!important;
    left: 66.66%!important;
    z-index: 2;
    width: 33.33%!important;
}