Posted By

marshalletm on 08/13/11


Tagged


Versions (?)

HTML and CSS for drop down menu


 / Published in: HTML
 

Insert the attribute into linked CSS stylesheet

  1. /* Nav menu with drop down feature */
  2.  
  3. #navMenu {
  4. margin: 0;
  5. padding: 0;
  6.  
  7. }
  8.  
  9. #navMenu ul {
  10. margin: 0;
  11. padding: 0;
  12. line-height: 30px;
  13. }
  14.  
  15. #navMenu li {
  16. margin: 0;
  17. padding: 0;
  18. list-style: none;
  19. float: left;
  20. position: relative;
  21. background: red;
  22. }
  23.  
  24. #navMenu ul li a {
  25. text-align: center;
  26. font-family: "Comic Sans MS", cursive;
  27. text-decoration: none;
  28. height: 30px;
  29. width: 150px;
  30. display: block;
  31. color: #FFF;
  32. border: 1px solid white;
  33. text-shadow: 1px 1px 1px #000;
  34. }
  35.  
  36. #navMenu ul ul {
  37. position: absolute;
  38. visibility: hidden;
  39. top: 32px;
  40. }
  41.  
  42. #navMenu ul li:hover ul {
  43. visibility:visible;
  44. }
  45.  
  46. /********************************/
  47.  
  48. #navMenu li:hover {
  49. background: #09F;
  50. }
  51.  
  52. #navMenu ul li:hover ul li a:hover {
  53. background: #E55451;
  54. color: #000;
  55. }
  56.  
  57. #navMenu a:hover {
  58. color: #000;
  59. }
  60.  
  61. #rightnav {
  62. text-align: center;
  63. float: right;
  64. width: 139px;
  65. height: 400px;
  66. background-color: lightgreen;
  67. border-left: 1px dashed #000000;
  68. }
  69.  
  70. /* end of nav menu */
  71.  
  72.  
  73.  
  74. <header>
  75. <div id="buttonbar">
  76. <div id="navMenu">
  77. <ul>
  78. <li>
  79. <a href="#">Products</a>
  80. <ul>
  81. <li>
  82. <a href="#">Link Item</a>
  83. </li>
  84. <li>
  85. <a href="#">Link Item</a>
  86. </li>
  87. <li>
  88. <a href="#">Link Item</a>
  89. </li>
  90. <li>
  91. <a href="#">Link Item</a>
  92. </li>
  93. <li>
  94. <a href="#">Link Item</a>
  95. </li>
  96. </ul>
  97. </li><!-- end main LI -->
  98. </ul><!-- end main UL -->
  99. <ul>
  100. <li>
  101. <a href="#">Services</a>
  102. <ul>
  103. <li>
  104. <a href="#">Link Item</a>
  105. </li>
  106. <li>
  107. <a href="#">Link Item</a>
  108. </li>
  109. <li>
  110. <a href="#">Link Item</a>
  111. </li>
  112. <li>
  113. <a href="#">Link Item</a>
  114. </li>
  115. <li>
  116. <a href="#">Link Item</a>
  117. </li>
  118. </ul>
  119. </li><!-- end main LI -->
  120. </ul><!-- end main UL -->
  121. <ul>
  122. <li>
  123. <a href="#">Events</a>
  124. <ul>
  125. <li>
  126. <a href="#">Link Item</a>
  127. </li>
  128. <li>
  129. <a href="#">Link Item</a>
  130. </li>
  131. <li>
  132. <a href="#">Link Item</a>
  133. </li>
  134. <li>
  135. <a href="#">Link Item</a>
  136. </li>
  137. <li>
  138. <a href="#">Link Item</a>
  139. </li>
  140. </ul>
  141. </li><!-- end main LI -->
  142. </ul><!-- end main UL -->
  143. <ul>
  144. <li>
  145. <a href="#">Funny Stuff</a>
  146. <ul>
  147. <li>
  148. <a href="#">Link Item</a>
  149. </li>
  150. <li>
  151. <a href="#">Link Item</a>
  152. </li>
  153. <li>
  154. <a href="#">Link Item</a>
  155. </li>
  156. <li>
  157. <a href="#">Link Item</a>
  158. </li>
  159. <li>
  160. <a href="#">Link Item</a>
  161. </li>
  162. </ul>
  163. </li><!-- end main LI -->
  164. </ul><!-- end main UL -->
  165. <ul>
  166. <li>
  167. <a href="#">Contact Us</a>
  168. <ul>
  169. <li>
  170. <a href="#">Link Item</a>
  171. </li>
  172. <li>
  173. <a href="#">Link Item</a>
  174. </li>
  175. <li>
  176. <a href="#">Link Item</a>
  177. </li>
  178. <li>
  179. <a href="#">Link Item</a>
  180. </li>
  181. <li>
  182. <a href="#">Link Item</a>
  183. </li>
  184. </ul>
  185. </li><!-- end main LI -->
  186. </ul><!-- end main UL -->
  187. </div>
  188. </div>
  189. <div id="rightnav">This is the rightnav</div>
  190. <div id="body">This is the body</div>
  191. </div>
  192. </header>

Report this snippet  

You need to login to post a comment.