CSS   34

menu css

Guest on 17th July 2022 05:41:35 AM

  1. /* menu styles */
  2.  
  3. #header {
  4.     overflow: visible;
  5. }
  6.  
  7. #header #branding h1 {
  8.     margin: 0;
  9.     padding: 5px 10px;
  10.     height: 31px;
  11. }
  12.  
  13. #header ul {
  14.     list-style: none;
  15.     margin: 0;
  16.     padding: 0;
  17.     z-index: 9999;
  18. }
  19.  
  20. #header ul li {
  21.     position: relative;
  22.     list-style: none;
  23. }
  24.  
  25. #header ul li a {
  26.     white-space: nowrap;
  27. }
  28.  
  29. #header #navigation-menu {
  30.     height: 35px;
  31.     z-index: 9999;
  32.     background: transparent url(../images/admin-tools.png) repeat-x 0 -205px;
  33. }
  34.  
  35. #header #bookmark-button {
  36.     cursor: pointer;
  37.     position: absolute;
  38.     top: auto;
  39.     right: 15px;
  40.     height: 25px;
  41.     width: 24px;
  42.     margin-top: 4px;
  43.     border: none;
  44.     text-indent: -5000px;
  45.     overflow: hidden;
  46.     background: transparent url(../images/admin-tools.png) no-repeat 0 -425px;
  47. }
  48.  
  49. #header #bookmark-button.bookmarked {
  50.     background-position: 0 -445px;
  51. }
  52.  
  53. #header ul#navigation-menu li {
  54.     float: left;
  55. }
  56.  
  57. #header ul#navigation-menu li a {
  58.     display: block;
  59.     text-transform: uppercase;
  60.     text-decoration: none;
  61.     padding: 9px 15px;
  62.     border-right: 1px solid #ededed;
  63.     color: #555;
  64. }
  65.  
  66. #header ul#navigation-menu li.disabled a {
  67.     color: #bbb;
  68.     cursor: default;
  69. }
  70.  
  71. #header ul#navigation-menu li.first a {
  72.     margin: 5px 0 0 12px;
  73.     padding-top: 4px;
  74.     text-indent: 14px;
  75.     background: transparent url(../images/admin-tools.png) no-repeat 0 -385px;
  76. }
  77.  
  78. #header ul#navigation-menu li span {
  79.     float: right;
  80.     height: 10px;
  81.     width: 20px;
  82.     background: transparent url(../images/admin-tools.png) no-repeat 0 -360px;
  83. }
  84.  
  85. #header ul#navigation-menu li:hover,
  86. #header ul#navigation-menu li.over,
  87. #header ul#navigation-menu li.selected {
  88.     background: url(../images/admin-tools.png) repeat-x 0 -245px;
  89. }
  90.  
  91. #header ul#navigation-menu li ul {
  92.     display: none;
  93.     position: absolute;
  94.     top: auto;
  95.     left: auto;
  96.     margin-left: -1px;
  97.     margin-top: -1px;
  98. }
  99.  
  100. #header ul#navigation-menu li ul li {
  101.     padding: 0;
  102.     float: none;
  103.     background: none;
  104.     z-index: 9999;
  105. }
  106.  
  107. #header ul#navigation-menu li ul li a {
  108.     display: block;
  109.     border: 1px solid #ededed;
  110.     border-width: 0 1px 1px 1px;
  111.     text-transform: none;
  112.     min-width: 180px;
  113. }
  114.  
  115. #header ul#navigation-menu li ul li span {
  116.     background-position: 0 -370px;
  117. }
  118.  
  119. #header ul#navigation-menu li ul li ul {
  120.     left: 100%;
  121.     top: 0;
  122.     border-top: 1px solid #ededed;
  123. }
  124.  
  125. #header ul#navigation-menu li ul li ul li a {
  126.     white-space: nowrap;
  127. }
  128.  
  129. #header ul#navigation-menu li:hover ul li ul,
  130. #header ul#navigation-menu li.over ul li ul {
  131.     display: none;
  132. }
  133.  
  134. #header ul#navigation-menu li:hover>ul,
  135. #header ul#navigation-menu li.over>ul,
  136. #header ul#navigation-menu li ul li:hover>ul,
  137. #header ul#navigation-menu li ul li.over>ul {
  138.     display: block;
  139. }
  140.  
  141. #header ul#navigation-menu li:hover>ul li,
  142. #header ul#navigation-menu li.over>ul li,
  143. #header ul#navigation-menu li ul li:hover>ul li,
  144. #header ul#navigation-menu li ul li.over>ul li {
  145.     background: transparent url(../images/admin-tools.png) repeat-x 0 -285px;
  146. }
  147.  
  148. #header ul#navigation-menu li ul li:hover,
  149. #header ul#navigation-menu li ul li.over,
  150. #header ul#navigation-menu li ul li ul li:hover,
  151. #header ul#navigation-menu li ul li ul li.over {
  152.     background: transparent url(../images/admin-tools.png) repeat-x 0 -245px;
  153. }
  154.  
  155. #header ul#navigation-menu li.disabled a:hover,
  156. #header ul#navigation-menu li.disabled a.over {
  157.     background: none;
  158. }

Raw Paste

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