DropDownList using HTML & CSS

In this blog, I will give you HTML CODE embedded with CSS. In CSS we use ul (unordered list) and li (list item). in this code, I made an ID (menu). here all the list items are initially hidden but after hover on the menu the list item is drop-down.
HTML CODE
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. #menu
  6. {
  7. margin: 0px;
  8. margin-left: 50px;
  9. padding: 0px;
  10. }
  11. #menu ul
  12. {
  13. margin: 0px;
  14. padding: 0px;
  15. }
  16. #menu li
  17. {
  18. margin: 0px;
  19. padding: 0px;
  20. list-style: none;
  21. float: left;
  22. position: relative;
  23. background: #999;
  24. }
  25. #menu ul li a
  26. {
  27. text-align: center;
  28. font-family: Georgia, "Times New Roman" , Times, serif;
  29. text-decoration: none;
  30. height: 30px;
  31. width: 150px;
  32. display: block;
  33. color: #fff;
  34. border: 1px solid #000;
  35. text-shadow: 1px 1px 1px #000000;
  36. }
  37. #menu ul ul
  38. {
  39. position: absolute;
  40. visibility: hidden;
  41. top: 30px;
  42. }
  43. #menu ul li:hover ul
  44. {
  45. visibility: visible;
  46. }
  47. #menu li:hover
  48. {
  49. background: #F3C;
  50. }
  51. #menu ul li:hover ul li a:hover
  52. {
  53. background: #0F6;
  54. color: #000;
  55. }
  56. #menu a:hover
  57. {
  58. color: #000;
  59. }
  60. .clearfloat
  61. {
  62. clear: both;
  63. margin: 0px;
  64. padding: 0px;
  65. }
  66. </style>
  67. <title>Untitled Document</title>
  68. </head>
  69. <body>
  70. <div id="menu">
  71. <ul>
  72. <li>
  73. <a href="#">Name</a>
  74. <ul>
  75. <li>
  76. <a href="#">sanjay</a>
  77. </li>
  78. <li>
  79. <a href="#">sanjay </a>
  80. </li>
  81. <li>
  82. <a href="#">sanjay </a>
  83. </li>
  84. <li>
  85. <a href="#">sanjay </a>
  86. </li>
  87. <li>
  88. <a href="#">sanjay</a>
  89. </li>
  90. </ul>
  91. </li>
  92. <li>
  93. <a href="#">Name</a>
  94. <ul>
  95. <li>
  96. <a href="#">sanjay</a>
  97. </li>
  98. <li>
  99. <a href="#">sanjay </a>
  100. </li>
  101. <li>
  102. <a href="#">sanjay </a>
  103. </li>
  104. <li>
  105. <a href="#">sanjay </a>
  106. </li>
  107. <li>
  108. <a href="#">sanjay</a>
  109. </li>
  110. </ul>
  111. </li>
  112. <li>
  113. <a href="#">Name</a>
  114. <ul>
  115. <li>
  116. <a href="#">sanjay</a>
  117. </li>
  118. <li>
  119. <a href="#">sanjay </a>
  120. </li>
  121. <li>
  122. <a href="#">sanjay </a>
  123. </li>
  124. <li>
  125. <a href="#">sanjay </a>
  126. </li>
  127. <li>
  128. <a href="#">sanjay</a>
  129. </li>
  130. </ul>
  131. </li>
  132. </li>
  133. </ul>
  134. </div>
  135. </body>undefined</html>