Advertisement
Guest User

menu.css

a guest
Jul 22nd, 2013
261
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 2.79 KB | None | 0 0
  1.  /* Reset */
  2. .menu,
  3. .menu ul,
  4. .menu li,
  5. .menu a {
  6.     margin: 0 auto;
  7.     padding: 0 auto;
  8.     border: none;
  9.     outline: none;
  10.     font-family: Arial,Helvetica,sans-serif;
  11.     font-size: 13px;
  12.     line-height: 150%;
  13. }
  14.  
  15. /* Menu */
  16. .menu {
  17.  
  18.     z-index: 2000;
  19.  
  20.     height: 40px;
  21.  
  22.     max-width: 100%;
  23.  
  24.     margin: 0 auto;
  25.  
  26.     background: #4c4e5a;
  27.     background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
  28.     background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
  29.     background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
  30.     background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
  31.     background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
  32.  
  33.     -webkit-border-radius: 5px;
  34.     -moz-border-radius: 5px;
  35.     border-radius: 0px 0px 10px 10px;
  36. }
  37.  
  38. .menu li {
  39.     position: relative;
  40.     display: table-cell;
  41.     list-style: none;
  42.     float: left;
  43.     display: block;
  44.     height: 40px;
  45. }
  46.  
  47. /* Links */
  48.  
  49. .menu li a {
  50.     display: block;
  51.     padding: 0 62px;
  52.     margin: 6px 0;
  53.     line-height: 28px;
  54.     text-decoration: none;
  55.  
  56.     /*border-left: 1px solid rgb(238,238,238);
  57.  
  58.     border-right: 1px solid #4f5058;*/
  59.  
  60.     font-family: Helvetica, Arial, sans-serif;
  61.     font-weight: bold;
  62.     font-size: 13px;
  63.  
  64.     color: #f3f3f3;
  65.     /*text-shadow: 1px 1px 1px rgba(0,0,0,.6);*/
  66.  
  67.     -webkit-transition: color .2s ease-in-out;
  68.     -moz-transition: color .2s ease-in-out;
  69.     -o-transition: color .2s ease-in-out;
  70.     -ms-transition: color .2s ease-in-out;
  71.     transition: color .2s ease-in-out;
  72. }
  73.  
  74. .menu li:first-child a { border-left: none; }
  75. .menu li:last-child a{ border-right: none; }
  76.  
  77. .menu li:hover > a { color: #c3c3c3; }
  78.  
  79. /* Sub Menu */
  80.  
  81. .menu ul {
  82.     position: absolute;
  83.     top: 40px;
  84.     left: 0;
  85.  
  86.     opacity: 0;
  87.  
  88.     z-index: 1000;
  89.  
  90.     background: #1f2024;
  91.  
  92.     -webkit-border-radius: 0 0 5px 5px;
  93.     -moz-border-radius: 0 0 5px 5px;
  94.     border-radius: 5px 5px 5px 5px;
  95.  
  96.     -webkit-transition: opacity .25s ease .1s;
  97.     -moz-transition: opacity .25s ease .1s;
  98.     -o-transition: opacity .25s ease .1s;
  99.     -ms-transition: opacity .25s ease .1s;
  100.     transition: opacity .25s ease .1s;
  101. }
  102.  
  103. .menu li:hover > ul { opacity: 1; }
  104.  
  105. .menu ul li {
  106.     height: 0;
  107.     overflow: hidden;
  108.     padding: 0;
  109.  
  110.     -webkit-transition: height .25s ease .1s;
  111.     -moz-transition: height .25s ease .1s;
  112.     -o-transition: height .25s ease .1s;
  113.     -ms-transition: height .25s ease .1s;
  114.     transition: height .25s ease .1s;
  115. }
  116.  
  117. .menu li:hover > ul li {
  118.     height: 36px;
  119.     overflow: visible;
  120.     padding: 0;
  121. }
  122.  
  123. .menu ul li a {
  124.     width: 170px;
  125.     padding: 4px 0 4px 15px;
  126.     margin: 0;
  127.  
  128.     border: none;
  129.     border-bottom: 1px solid #353539;
  130. }
  131.  
  132. .menu ul li:last-child a { border: none; }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement