CSS - Drop Down Menu


/ Published in: CSS
Save to your folder(s)



Copy this code and paste it in your HTML
  1. /*******************************
  2. CSS FOR MENU
  3. *******************************/
  4. #nav {
  5. position:relative;
  6. z-index:99;
  7.  
  8. margin: 0;
  9. padding: 7px 6px 0;
  10. background: #7d7d7d url(/resources/cssImg/gradient.png) repeat-x 0 -110px;
  11. line-height: 100%;
  12.  
  13. border-radius: 2em;
  14. -webkit-border-radius: 2em;
  15. -moz-border-radius: 2em;
  16.  
  17. -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
  18. -moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
  19. }
  20. #nav li {
  21. margin: 0 5px;
  22. padding: 0 0 8px;
  23. float: left;
  24. position: relative;
  25. list-style: none;
  26. }
  27.  
  28.  
  29. /* main level link */
  30. #nav a {
  31. font-weight: bold;
  32. color: #e7e5e5;
  33. text-decoration: none;
  34. display: block;
  35. padding: 8px 20px;
  36. margin: 0;
  37.  
  38. -webkit-border-radius: 1.6em;
  39. -moz-border-radius: 1.6em;
  40.  
  41. text-shadow: 0 1px 1px rgba(0,0,0, .3);
  42. }
  43. #nav a:hover {
  44. background: #000;
  45. color: #fff;
  46. }
  47.  
  48. /* main level link hover */
  49. #nav .current a, #nav li:hover > a {
  50. background: #666 url(/resources/cssImg/gradient.png) repeat-x 0 -40px;
  51. color: #444;
  52. border-top: solid 1px #f8f8f8;
  53.  
  54. -webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2);
  55. -moz-box-shadow: 0 1px 1px rgba(0,0,0, .2);
  56. box-shadow: 0 1px 1px rgba(0,0,0, .2);
  57.  
  58. text-shadow: 0 1px 0 rgba(255,255,255, 1);
  59. }
  60.  
  61. /* sub levels link hover */
  62. #nav ul li:hover a, #nav li:hover li a {
  63. background: none;
  64. border: none;
  65. color: #666;
  66.  
  67. -webkit-box-shadow: none;
  68. -moz-box-shadow: none;
  69. }
  70. #nav ul a:hover {
  71. background: #0078ff url(/resources/cssImg/gradient.png) repeat-x 0 -100px !important;
  72. color: #fff !important;
  73.  
  74. -webkit-border-radius: 0;
  75. -moz-border-radius: 0;
  76.  
  77. text-shadow: 0 1px 1px rgba(0,0,0, .1);
  78. }
  79.  
  80. /* dropdown */
  81. #nav li:hover > ul {
  82. display: block;
  83. }
  84.  
  85. /* level 2 list */
  86. #nav ul {
  87. display: none;
  88.  
  89. margin: 0;
  90. padding: 0;
  91. width: 185px;
  92. position: absolute;
  93. top: 35px;
  94. left: 0;
  95. background: #ddd url(/resources/cssImg/gradient.png) repeat-x 0 0;
  96. border: solid 1px #b4b4b4;
  97.  
  98. -webkit-border-radius: 10px;
  99. -moz-border-radius: 10px;
  100. border-radius: 10px;
  101.  
  102. -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3);
  103. -moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);
  104. box-shadow: 0 1px 3px rgba(0,0,0, .3);
  105. }
  106. #nav ul li {
  107. float: none;
  108. margin: 0;
  109. padding: 0;
  110. }
  111.  
  112. #nav ul a {
  113. font-weight: normal;
  114. text-shadow: 0 1px 0 #fff;
  115. }
  116.  
  117. /* level 3+ list */
  118. #nav ul ul {
  119. left: 181px;
  120. top: -3px;
  121. }
  122.  
  123. /* rounded corners of first and last link */
  124. #nav ul li:first-child > a {
  125. -webkit-border-top-left-radius: 9px;
  126. -moz-border-radius-topleft: 9px;
  127.  
  128. -webkit-border-top-right-radius: 9px;
  129. -moz-border-radius-topright: 9px;
  130. }
  131. #nav ul li:last-child > a {
  132. -webkit-border-bottom-left-radius: 9px;
  133. -moz-border-radius-bottomleft: 9px;
  134.  
  135. -webkit-border-bottom-right-radius: 9px;
  136. -moz-border-radius-bottomright: 9px;
  137. }
  138.  
  139. /* clearfix */
  140. #nav:after {
  141. content: ".";
  142. display: block;
  143. clear: both;
  144. visibility: hidden;
  145. line-height: 0;
  146. height: 0;
  147. }
  148. #nav {
  149. display: inline-block;
  150. }
  151. html[xmlns] #nav {
  152. display: block;
  153. }
  154.  
  155. * html #nav {
  156. height: 1%;
  157. }
  158.  

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.