CSS for Lava-Lamp style Nav Menu


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

Name this style.css or re-associate the style sheet in HTML to the saved CSS file of your choice


Copy this code and paste it in your HTML
  1. #container {
  2. width: 1200px;
  3. margin: 100px auto;
  4. }
  5. ul, li {
  6. margin: 0; padding: 0;
  7. }
  8. #blob {
  9. border-right: 1px solid #0059ec;
  10. border-left: 1px solid #0059ec;
  11. position: absolute;
  12. top: 0;
  13. z-index : 1;
  14. background: #0b2b61;
  15. background: -moz-linear-gradient(top, #0b2b61, #1153c0);
  16. background: -webkit-gradient(linear, left top, left bottom, from(#0b2b61), to(#1153c0));
  17. -moz-border-radius: 4px;
  18. -webkit-border-radius: 4px;
  19. -moz-box-shadow: 2px 3px 10px #011331;
  20. -webkit-box-shadow: 2px 3px 10px #011331;
  21. }
  22. #nav {
  23. position: relative;
  24. background: #292929;
  25. float: left;
  26. }
  27. #nav li {
  28. float: left;
  29. list-style: none;
  30. border-right: 1px solid #4a4a4a;
  31. border-left: 1px solid black;
  32. }
  33. #nav li a {
  34. color: #e3e3e3;
  35. position: relative;
  36. z-index: 2;
  37. float: left;
  38. font-size: 30px;
  39. font-family: helvetica, arial, sans-serif;
  40. text-decoration: none;
  41. padding: 30px 45px;
  42. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.