Advanced Search

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

Expand | Embed | Plain Text

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.