Advertisement
sayful

CSS for Dropdown Menu

Feb 2nd, 2014
67
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 2.34 KB | None | 0 0
  1. #menu
  2. {
  3. background: #222; /* Show a solid color for older browsers */
  4. background: -moz-linear-gradient(#252525, #0a0a0a);
  5. background: -o-linear-gradient(#252525, #0a0a0a);
  6. background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#252525), to(#0a0a0a)); /* older webkit syntax */
  7. background: -webkit-linear-gradient(#252525, #0a0a0a);
  8. -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
  9. -moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
  10. box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
  11. clear: both;
  12. display: block;
  13. float: left;
  14. margin: auto;
  15. width: 100%;
  16. }
  17. #menu ul
  18. {
  19. font-size: 13px;
  20. list-style: none;
  21. margin: 0 0 0 30px;
  22. padding-left: 0;
  23. }
  24. #menu li
  25. {
  26. float: left;
  27. position: relative;
  28. }
  29. #menu a
  30. {
  31. color: #eee;
  32. display: block;
  33. line-height: 3.333em;
  34. padding: 0 55px;
  35. text-decoration: none;
  36. }
  37. #menu ul ul
  38. {
  39. -moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
  40. -webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
  41. box-shadow: 0 3px 3px rgba(0,0,0,0.2);
  42. display: none;
  43. float: left;
  44. margin: 0;
  45. position: absolute;
  46. top: 3.333em;
  47. left: 0;
  48. width: 188px;
  49. z-index: 99999;
  50. }
  51. #menu ul ul ul
  52. {
  53. left: 100%;
  54. top: 0;
  55. }
  56. #menu ul ul a
  57. {
  58. background: #f9f9f9;
  59. border-bottom: 1px dotted #ddd;
  60. color: #444;
  61. font-size: 13px;
  62. font-weight: normal;
  63. height: auto;
  64. line-height: 1.4em;
  65. padding: 10px 10px;
  66. width: 168px;}
  67. #menu li:hover > a{background: #efefef;}
  68. #menu ul ul :hover > a {background: #efefef;}
  69. #menu a:focus {background: #efefef;}
  70. #menu li:hover > a,#menu a:focus
  71. {
  72. background: #f9f9f9; /* Show a solid color for older browsers */
  73. background: -moz-linear-gradient(#f9f9f9, #e5e5e5);
  74. background: -o-linear-gradient(#f9f9f9, #e5e5e5);
  75. background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#e5e5e5)); /* Older webkit syntax */
  76. background: -webkit-linear-gradient(#f9f9f9, #e5e5e5);color: #373737;
  77. }
  78. #menu ul li:hover > ul {display: block;}
  79. #menu .current-menu-item > a,#menu .current-menu-ancestor > a,#menu .current_page_item > a,#menu .current_page_ancestor > a, #menu .active > a
  80. {
  81. background: #f9f9f9; /* Show a solid color for older browsers */
  82. background: -moz-linear-gradient(#f9f9f9, #e5e5e5);
  83. background: -o-linear-gradient(#f9f9f9, #e5e5e5);
  84. background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#e5e5e5)); /* Older webkit syntax */
  85. background: -webkit-linear-gradient(#f9f9f9, #e5e5e5);
  86. color: #373737;
  87. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement