CSS Blur Menu Navigation


/ Published in: CSS
Save to your folder(s)

Html and CSS included...


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.