Advanced Search

CSS Blur Menu Navigation

/ Published in: CSS
Save to your folder(s)
Html and CSS included...

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. HTML:
  2.  
  3. <nav class="menu" role="navigation">
  4.     <ul>
  5.         <li><a href="#">Item One</a></li>
  6.         <li><a href="#">Item Two</a></li>
  7.         <li><a href="#">Item Three</a></li>
  8.         <li><a href="#">Item Four</a></li>
  9.         <li><a href="#">Item Five</a></li>
  10.     </ul>
  11. </nav>
  12.  
  13.  
  14. CSS:
  15.  
  16. .menu ul li { display: inline; }
  17. .menu ul li a {
  18.     color: black;
  19.     float: left;
  20.     text-decoration: none;
  21.     padding: 10px 25px;
  22.     letter-spacing: 1px;
  23. }
  24. .menu:hover li a {
  25.     text-shadow: 0px 0px 3px #555;
  26.     color: #bbb;
  27. }
  28. .menu li a:hover {
  29.     color: black;
  30.     text-shadow: 0px 0px 0px #000;
  31. }
  32. .menu li a:active {
  33.     position: relative;
  34.     top: 2px;
  35. }

URL: http://www.design-ninja.net

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.