Dropdown Navigation

Dropdown ul > li navigation using CSS3

by erick

HTML

<ul class="menu">
  <li><a href="#">My dashboard</a></li>
  <li><a href="#">Likes</a></li>
  <li><a href="#">Views</a>
    <ul>
      <li><a href="#"><div>K</div>Documents</a></li>
      <li><a href="#"><div>m</div>Messages</a></li>
      <li><a href="#"><div>X</div>Sign Out</a></li>
    </ul>
  </li>
  <li><a href="#">Uploads</a></li>
  <li><a href="#">Videos</a></li>
  <li><a href="#">Documents</a></li>
</ul>

CSS

@font-face {
 font-family: ModernPictograms;
 src: url("http://dl.dropbox.com/u/1621719/development/JSFiddle/fonts/modernpics.otf")
}

/* -------------------------------------------------------|
|  Styles by Tony Montemorano of Allusis Productions      |
|  http://gplus.to/allusis - http://allusis.net           |
|--------------------------------------------------------*/
html, 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}
.hidden {position:absolute !important;top:-9999px !important;left:-9999px !important}
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;margin:0;padding:0}
body{line-height:1}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
nav ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:none}
a{font-size:100%;vertical-align:baseline;background:transparent;margin:0;padding:0;-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-ms-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;}
ins{background-color:#ff9;color:#000;text-decoration:none}
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:700}
del{text-decoration:line-through}
abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}
table{border-collapse:collapse;border-spacing:0}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
input,select{vertical-align:middle}

/*...