Cool Simple CSS Drop Down Menu

Cool Pure CSS Droop Down Horizontal Menu Design

<ul><li class="home">Home</li>
  <li class="about">About</li>
  <li class="portfolio">
    Portfolio
    <ul>
      <li>Web Design</li>
      <li>Web Development</li>
      <li>Illustrations</li>
    </ul>
  </li>
  <li class="blog">Blog</li>
  <li class="contact">Contact</li>
</ul>

body{font-family:'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;text-align:center;background:#E3CAA1;padding:20px 50px 150px;}
ul{text-align:left;display:inline;list-style:none;-webkit-box-shadow:0 0 5px rgba(0,0,0,0.15);-moz-box-shadow:0 0 5px rgba(0,0,0,0.15);box-shadow:0 0 5px rgba(0,0,0,0.15);margin:0;padding:15px 4px 17px 0;}
ul li{font:bold 12px/18px sans-serif;display:inline-block;margin-right:-4px;position:relative;background:#fff;cursor:pointer;-webkit-transition:all .2s;-moz-transition:all .2s;-ms-transition:all .2s;-o-transition:all .2s;transition:all .2s;padding:15px 20px;}
ul li:hover{background:#555;color:#fff;}
ul li ul{position:absolute;top:48px;left:0;width:150px;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;display:none;opacity:0;visibility:hidden;-webkit-transiton:opacity .2s;-moz-transition:opacity .2s;-ms-transition:opacity .2s;-o-transition:opacity .2s;-transition:opacity .2s;padding:0;}
ul li ul li{background:#555;display:block;color:#fff;text-shadow:0 -1px 0 #000;}
ul li ul li:hover{background:#666;}
ul li:hover ul{display:block;opacity:1;visibility:visible;}
.home{border-top:3px solid #16a085;}
.home:hover{border-top:3px solid #1abc9c;background:#16a085;}
.about{border-top:3px solid #27ae60;}
.about:hover{border-top:3px solid #2ecc71;background:#27ae60;}
.portfolio{border-top:3px solid #2980b9;}
.portfolio:hover{border-top:3px solid #3498db;background:#2980b9;}
.blog{border-top:3px solid #8e44ad;}
.blog:hover{border-top:3px solid #9b59b6;background:#8e44ad;}
.contact{border-top:3px solid #2c3e50;}
.contact:hover{border-top:3px solid #34495e;background:#2c3e50;}

DEMO / DOWNLOAD