CSS   162

menu.css

Guest on 20th July 2021 03:54:23 PM

  1. #nav,#nav ul {
  2.     list-style: none outside none;
  3.     margin: 0;
  4.     padding: 0;
  5. }
  6. #nav {
  7.     font-family: "Lucida Sans Unicode",Verdana,Arial,sans-serif;
  8.     font-size: 14px;
  9.     height: 36px;
  10.     list-style: none outside none;
  11.     margin: 50px auto;
  12.     text-shadow: 0 -1px 3px #737373;
  13.     width: 1000px;
  14.    
  15.  
  16.  
  17.     /* border radius */
  18.     -moz-border-radius: 4px;
  19.     -webkit-border-radius: 4px;
  20.     border-radius: 4px;
  21.  
  22.     /* box shadow */
  23.     -moz-box-shadow: 0px 3px 3px #cecece;
  24.     -webkit-box-shadow: 0px 3px 3px #cecece;
  25.     box-shadow: 0 3px 4px #8b8b8b;
  26.  
  27.     /* gradient */
  28.     background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #B8B8B8), color-stop(0.5, #818181), color-stop(0.51, #707070), color-stop(1, #838383));
  29.     background-image: -moz-linear-gradient(center bottom, #B8B8B8 0%, #818181 50%, #707070 51%, #838383 100%);
  30.     background-color: #7A7A7A;
  31. }
  32. #nav li {
  33.     border-bottom: 1px solid #7A7A7A;
  34.     border-left: 1px solid #7A7A7A;
  35.     border-right: 1px solid #7A7A7A;
  36.     border-top: 1px solid #7A7A7A;
  37.     display: block;
  38.     float: left;
  39.     height: 40px;
  40.     position: relative;
  41.     width: 190px;
  42.     padding-left: 10px;
  43. }
  44. #nav > li:first-child {
  45.     border-left: 0 none;
  46.     margin-left: 5px;
  47. }
  48. #nav ul {
  49.     left: -9999px;
  50.     position: absolute;
  51.     top: -9999px;
  52.     z-index: 2;
  53. }
  54. #nav ul li {
  55.     background: none repeat scroll 0 0 #7A7A7A;
  56.     box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
  57.     width: 100%;
  58. }
  59. #nav li a {
  60.     color: #FFFFFF;
  61.     display: block;
  62.     line-height: 34px;
  63.     outline: medium none;
  64.     text-align: center;
  65.     text-decoration: none;
  66.  
  67.     /* gradient */
  68.     background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #363636), color-stop(0.5, #818181), color-stop(0.51, #2A5A2A), color-stop(1, #5E5E5E));
  69.     background-image: -moz-linear-gradient(center bottom, #363636 0%, #818181 50%, #5E5E5E%, #5E5E5E 100%);
  70.     background-color: #CC3300;
  71. }
  72.  
  73. /* keyframes #animation */
  74. @-webkit-keyframes animation {
  75.     0% {
  76.         -webkit-transform: scale(1);
  77.     }
  78.     30% {
  79.         -webkit-transform: scale(1.2);
  80.     }
  81.     100% {
  82.         -webkit-transform: scale(1.1);
  83.     }
  84. }
  85. @-moz-keyframes animation {
  86.     0% {
  87.         -moz-transform: scale(1);
  88.     }
  89.     30% {
  90.         -moz-transform: scale(1.2);
  91.     }
  92.     100% {
  93.         -moz-transform: scale(1.1);
  94.     }
  95. }
  96. #nav li > a:hover {
  97.     /* CSS3 animation */
  98.     -webkit-animation-name: animation;
  99.     -webkit-animation-duration: 0.3s;
  100.     -webkit-animation-timing-function: linear;
  101.     -webkit-animation-iteration-count: 1;
  102.     -webkit-animation-direction: normal;
  103.     -webkit-animation-delay: 0;
  104.     -webkit-animation-play-state: running;
  105.     -webkit-animation-fill-mode: forwards;
  106.     -moz-animation-name: animation;
  107.     -moz-animation-duration: 0.3s;
  108.     -moz-animation-timing-function: linear;
  109.     -moz-animation-iteration-count: 1;
  110.     -moz-animation-direction: normal;
  111.     -moz-animation-delay: 0;
  112.     -moz-animation-play-state: running;
  113.     -moz-animation-fill-mode: forwards;
  114. }
  115. #nav li:hover ul {
  116.     left: 0;
  117.     top: 34px;
  118.     width: 190px;
  119. }

Raw Paste


Login or Register to edit or fork this paste. It's free.