Drop Down Nav 02

by allusis

HTML

<ul class="menu">
  <li><a href="#">Current Project</a>
    <ul class="large">
      <li><a href="#"><span class="green"></span>Proposal: 01-101</a></li>
      <li><a href="#"><span class="green"></span>IACUC: 12-002 - Pending</a></li>
      <li><a href="#"><span class="green"></span></span>IACUC: 12-203</a></li>
      <li><a href="#"><span class="green"></span></span>Proposal: 01-101</a></li>
      <li><a href="#"><span class="red"></span></span>IACUC: 12-002 - Pending</a></li>
      <li><a href="#"><span class="red"></span></span>IACUC: 12-203</a></li>
      <li><a href="#"><span class="red"></span></span>Proposal: 01-101</a></li>
      <li><a href="#"><span class="red"></span></span>IACUC: 12-002 - Pending</a></li>
      <li><a href="#"><span class="red"></span></span>IACUC: 12-203</a></li>
      <li><a href="#"><span class="red"></span></span>Proposal: 01-101</a></li>
      <li><a href="#"><span class="red"></span></span>IACUC: 12-002 - Pending</a></li>
      <li><a href="#"><span class="green"></span></span>IACUC: 12-203</a></li>
      <li><a href="#"><span class="green"></span></span>Proposal: 01-101</a></li>
      <li><a href="#"><span class="green"></span></span>IACUC: 12-002 - Pending</a></li>
      <li><a href="#"><span class="green"></span></span>IACUC: 12-203</a></li>
      <li><a href="#"><span class="green"></span></span>Proposal: 01-101</a></li>
      <li><a href="#"><span class="green"></span></span>IACUC: 12-002 - Pending</a></li>
      <li><a href="#"><span class="green"></span></span>IACUC: 12-203</a></li>
    </ul>
  </li>
  <li><a href="#">Development</a>
    <ul>
      <li><a href="#"><span class="view"></span>View</a></li>
      <li><a href="#"><span class="edit"></span>Edit</a></li>
    </ul>
  </li>
  <li><a href="#">Management</a>
    <ul>
      <li><a href="#"><span class="view"></span>View</a></li>
      <li><a href="#"><span class="edit"></span>Edit</a></li>
    </ul>
  </li>
  <li><a href="#">Collaborate &amp;...

CSS

html, body {margin:0;padding:0;width:100%;height:100%;overflow:hidden;}
body {font-family:"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;font-weight:300;font-size:100%}
.clear {clear:both}
.group:before,.group:after {content:"";display:table}
.group:after {clear:both}
.group {zoom:1}
.hidden {position:absolute !important;top:-9999px !important;left:-9999px !important}

table.wrapper {border-collapse:collapse;border-spacing:0;width:100%;margin:0}
table.wrapper tr td {padding:0;margin:0}
.top {height:100px;border-bottom:1px solid #ddd;display:block;}
#frame-content {width:100%;border:none;}

/* Menu (Main nav) */
ul.menu,ul.menu ul,ul.menu li,ul.menu a {margin:0;padding:0;border:none;outline:none}
ul.menu {height:30px;background: rgb(125,126,125);background:-moz-linear-gradient(top, rgba(125, 126, 125, 1) 0%, rgba(68, 68, 68, 1) 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,126,125,1)), color-stop(100%,rgba(68,68,68,1)));background: -webkit-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(68,68,68,1) 100%);background: -o-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(68,68,68,1) 100%);background: -ms-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(68,68,68,1) 100%);background: linear-gradient(top, rgba(125,126,125,1) 0%,rgba(68,68,68,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#444444',GradientType=0 );background:...