Post
Ask Question

DropDownList using HTML & CSS

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>  
Next Recommended Reading Highlight HTML Table Alternate Row Colors Using CSS Selector