Advertisement
Dibba7

css for menu

Sep 19th, 2013
106
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 5.17 KB | None | 0 0
  1. /* The main container */
  2. .header-nav {
  3. /* Layout & positioning */
  4. display: block;
  5. position: relative;
  6. margin: 10px auto 0;
  7. padding: 0;
  8. height: 43px;
  9. width: 870px;
  10. list-style: none;
  11. border-radius: 0 0 10px 10px;
  12. z-index: 1000;
  13.  
  14. /* Background */
  15. background: #e777b1; /* Old browsers */
  16. background: -moz-linear-gradient(top, #e777b1 0%, #e0548f 100%); /* FF3.6+ */
  17. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e777b1), color-stop(100%,#e0548f)); /* Chrome,Safari4+ */
  18. background: -webkit-linear-gradient(top, #e777b1 0%,#e0548f 100%); /* Chrome10+,Safari5.1+ */
  19. background: -o-linear-gradient(top, #e777b1 0%,#e0548f 100%); /* Opera 11.10+ */
  20. background: -ms-linear-gradient(top, #e777b1 0%,#e0548f 100%); /* IE10+ */
  21. background: linear-gradient(to bottom, #e777b1 0%,#e0548f 100%); /* W3C */
  22. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e777b1', endColorstr='#e0548f',GradientType=0 ); /* IE6-9 */
  23.  
  24. }
  25.  
  26. .header-nav>li {
  27. display: block;
  28. float: left;
  29. margin: 0;
  30. padding: 0;
  31. position: relative;
  32.  
  33. }
  34.  
  35. /* The main navigation links */
  36. .header-nav>li>a {
  37. /* Layout & positioning */
  38. display: block;
  39. padding: 15px 20px;
  40. line-height: 13px;
  41.  
  42. /* Typography */
  43. font-family: Helvetica, Arial, sans-serif;
  44. text-decoration: none;
  45. text-transform: uppercase;
  46. font-size: 13px;
  47. color: #e7e5e6;
  48. font-weight: bold;
  49. }
  50.  
  51. /* The hover state of the navigation links */
  52. .header-nav>li>a:hover, .header-nav>li:hover>a {
  53. background: #dd4f98;
  54. }
  55.  
  56. .header-nav>li:hover>a:first-child {
  57. border-radius: 0 0 0 10px;
  58. }
  59.  
  60. .header-nav>.dropdown>a {
  61. padding-right: 25px;
  62. }
  63.  
  64. /* The '+' sign which indicates a submenu */
  65.  
  66. .header-nav>.dropdown>a::after {
  67. content: "";
  68. position: absolute;
  69. top: 19px;
  70. right: 13px;
  71. width: 1px;
  72. height: 5px;
  73. background: #fff;
  74. }
  75.  
  76. .header-nav>.dropdown>a::before {
  77. content: "";
  78. position: absolute;
  79. top: 21px;
  80. right: 11px;
  81. width: 5px;
  82. height: 1px;
  83. background: #fff;
  84. }
  85.  
  86. .header-nav>.dropdown>a:hover::after, .header-nav>.dropdown:hover>a::after {
  87. background: transparent;
  88. }
  89.  
  90. /* General submenu styling */
  91. .header-nav ul {
  92. position: absolute;
  93. list-style: none;
  94. margin: 0;
  95. padding: 0;
  96. padding: 7px 0;
  97. background: #fff;
  98. left: -9999px;
  99. border-bottom: 1px solid #d8d8d8;
  100. border-left: 1px solid #d8d8d8;
  101. border-right: 1px solid #d8d8d8;
  102. box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
  103. }
  104.  
  105. .header-nav ul li {
  106. position: relative;
  107. background: #fff;
  108. padding: 0 9px;
  109. width: 0px;
  110. height: 0px;
  111. }
  112.  
  113. /* Level 1 submenus */
  114. .header-nav>li:hover>ul {
  115. left: 0px;
  116. }
  117.  
  118. /* Level 2+ submenus */
  119. .header-nav ul ul {
  120. border-top: 1px solid #d8d8d8;
  121. }
  122.  
  123. .header-nav ul>li:hover>ul {
  124. top: -8px;
  125. left: 148px;
  126. }
  127.  
  128. /* Expanding the submenus on hover */
  129. .header-nav li:hover>ul>li {
  130. width: 150px;
  131. height: 30px;
  132. }
  133.  
  134. /* The links of the submenus */
  135. .header-nav ul li a {
  136. /* Layout */
  137. display: block;
  138. position: relative;
  139. padding: 5px 10px;
  140. border-radius: 3px;
  141. width: 130px;
  142.  
  143. /* Typography */
  144. font-family: Helvetica, Arial, sans-serif;
  145. font-size: 12px;
  146. text-decoration: none;
  147. color: #dd4f98;
  148.  
  149. /* Effects */
  150. }
  151.  
  152. /* The hover state of the submenu links */
  153. .header-nav ul li a:hover, .header-nav ul li:hover>a {
  154. background: #dd4f98;
  155. color: #fff;
  156. }
  157.  
  158. /* The '+' sign indicating a level 2+ submenu */
  159. .header-nav ul>.dropdown>a::after {
  160. content: "";
  161. position: absolute;
  162. top: 11px;
  163. right: 8px;
  164. width: 1px;
  165. height: 5px;
  166. background: #f27154;
  167. }
  168.  
  169. .header-nav ul>.dropdown>a::before {
  170. content: "";
  171. position: absolute;
  172. top: 13px;
  173. right: 6px;
  174. width: 5px;
  175. height: 1px;
  176. background: #f27154;
  177. }
  178.  
  179. .header-nav ul>.dropdown:hover>a::after {
  180. background: transparent;
  181. }
  182. .header-nav ul>.dropdown:hover>a::before {
  183. background: #fff;
  184. }
  185.  
  186.  
  187.  
  188. .foot-nav {
  189. display: block;
  190. margin: 30px auto 0;;
  191. width: 650px;
  192. height: 30px;
  193. list-style: none;
  194. border-radius: 10px;
  195. border: 1px solid #ccc;
  196. background: #e1e1e1;
  197. margin-bottom: 20px;
  198. opacity: 0.7;
  199. }
  200.  
  201. .foot-nav>li {
  202. float: left;
  203. margin: 0 ;
  204. padding: 0 15px;
  205. border-right: 1px solid #d3d1d2;
  206. }
  207.  
  208. .foot-nav>li:last-child {
  209. border-right: none;
  210. }
  211.  
  212. .foot-nav>li>a {
  213. /* Layout & positioning */
  214. display: block;
  215. padding: 15px 10px;
  216. line-height: 1px;
  217. text-shadow: 0 1px 0 rgba(255,255,255,0.7);
  218.  
  219. /* Typography */
  220. font-family: Helvetica, Arial, sans-serif;
  221. text-decoration: none;
  222. font-size: 12px;
  223. color: black;
  224.  
  225. }
  226.  
  227. .foot-nav li.current-menu-item { background: none;}
  228.  
  229. /*TOP-NAV*/
  230.  
  231. .upper-nav {margin-top: 10px;}
  232.  
  233. .top-nav ul{
  234. display: inline-block;
  235. margin: 0px;
  236. padding: 0px;
  237. list-style: none;
  238. }
  239.  
  240. .top-nav li{
  241. display: inline-block;
  242. margin: 0px;
  243. padding: 0px;
  244. }
  245.  
  246. .top-nav li a {
  247. display: inline-block;
  248. padding: 0px 15px 0px 14px;
  249. background: url(../images/topmenu_item_bg.png) 0 50% no-repeat;
  250. overflow: hidden;
  251. color: #969A9F;
  252. text-decoration: none;
  253. }
  254.  
  255. .top-nav a.first { background: none; }
  256. .top-nav a.last { padding: 0px 0px 0px 14px; }
  257.  
  258. .top-nav li a.active,
  259. .top-nav li a:hover { text-decoration: underline; }
  260.  
  261. .top-nav li.current-menu-item { background: none;}
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement