CSS   19

nav-style

Guest on 5th May 2022 01:51:32 AM

  1. /*----nav----*/
  2. nav {
  3.         margin-top:13px;
  4.         height: 40px;
  5.         width: 100%;
  6.         position:relative;
  7.         z-index: 999;
  8. }
  9. nav ul {
  10.         padding: 0;
  11.         margin: 0 auto;
  12.         display: none;
  13.         border-top: 1px solid #C7E603;
  14.         background: url(../images/nav-bg.png) repeat-x #80B404;
  15.         box-shadow: 0px 1px 5px #1F1E20;
  16.         overflow:hidden;
  17. }
  18. nav li {
  19.         display: block;
  20. }
  21. nav a {
  22.         color: #ffffff;
  23.         text-transform:uppercase;
  24.         display: block;
  25.         width:100%;
  26.         text-indent: 10px;
  27.         text-align: left;
  28.         text-decoration: none;
  29.         line-height: 40px;
  30.         font-family: 'Coda', cursive;
  31.         font-size:0.8em;
  32.         font-weight: normal;
  33. }
  34. nav li a {
  35.         line-height:30px;
  36.         border-bottom: 2px ridge #8FDF00;
  37.         box-sizing:border-box;
  38.         -moz-box-sizing:border-box;
  39.         -webkit-box-sizing:border-box;
  40.         -webkit-transition: all 0.3s ease;
  41.         -moz-transition: all 0.3s ease;
  42.         -o-transition: all 0.3s ease;
  43.         transition: all 0.3s ease;
  44.        
  45. }
  46. nav li:last-child a {
  47.         border-right: 0;
  48. }
  49. nav a:hover,
  50. nav a:active {
  51.         background: url(../images/nav_a.png) repeat-x;
  52.         color: #2D2D2F;
  53. }
  54. nav a#pull {
  55.         display: block;
  56.         border-top: 1px solid #8AA003;
  57.         background: url(../images/nav-bg.png) repeat-x #557900;
  58.         box-shadow: 0px 1px 5px #1F1E20;
  59.         width: 100%;
  60.         position: relative;
  61.         color:#FFF;
  62. }
  63. nav a#pull:after {
  64.         background: url(../images/nav-icon.png) no-repeat;
  65.         width: 30px;
  66.         content:"";
  67.         width: 30px;
  68.         height: 30px;
  69.         display: inline-block;
  70.         position: absolute;
  71.         right: 2px;
  72.         top:5px;
  73. }

Raw Paste

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