Drop Down Menu using CSS

This blog describe how to create Drop Down Menu using CSS.

Introduction

 
A drop-down menu is a graphical control element.It is similar to a list box, which collects multiple values and allows the user to choose one value from a list. When a drop-down list is inactive, it displays a single value. A drop-down menu is very easy to create with the help of some advanced selectors a drop-down menu can be easily created with CSS.
 

Program code

  • The HTML Structure: 
    1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Drop.aspx.cs" Inherits="drop.Drop" %>  
    2. <!DOCTYPE html>  
    3. <html  
    4.     xmlns="http://www.w3.org/1999/xhtml">  
    5.     <head runat="server">  
    6.         <link href="pop.css" rel="stylesheet" />  
    7.         <title></title>  
    8.     </head>  
    9.     <body>  
    10.         <form id="form1" runat="server">  
    11.             <div class="drop">  
    12.                 <ul>  
    13.                     <li>  
    14.                         <a href="www@example.com">Home</a>  
    15.                     </li>  
    16.                     <li>  
    17.                         <a href="www@example.com">About us</a>  
    18.                         <ul>  
    19.                             <li>  
    20.                                 <a href="www@example.com">Contect</a>  
    21.                             </li>  
    22.                             <li>  
    23.                                 <a href="www@example.com">Features</a>  
    24.                             </li>  
    25.                             <li>  
    26.                                 <a href="www@example.com">About Campus</a>  
    27.                             </li>  
    28.                             <li>  
    29.                                 <a href="www@example.com">Demo</a>  
    30.                             </li>  
    31.                         </ul>  
    32.                     </li>  
    33.                     <li>  
    34.                         <a href="www@example.com">Contect</a>  
    35.                         <ul>  
    36.                             <li>  
    37.                                 <a href="www@example.com">Director</a>  
    38.                             </li>  
    39.                             <li>  
    40.                                 <a href="www@example.com">Principal</a>  
    41.                             </li>  
    42.                             <li>  
    43.                                 <a href="www@example.com">Management</a>  
    44.                             </li>  
    45.                         </ul>  
    46.                     </li>  
    47.                 </ul>  
    48.             </div>  
    49.         </form>  
    50.     </body>  
    51. </html>    
  •  The CSS Styling
    1. .drop ul ul {  
    2.   displaynone;  
    3. }  
    4. .drop ul li:hover ul {  
    5.   displayblock;  
    6. }  
    7. .drop ul li {  
    8.   floatleft;  
    9. }  
    10. .drop ul li a {  
    11.   color#ffffff;  
    12.   displayblock;  
    13.   padding10px 10px;  
    14.   positionrelative;  
    15.   text-decorationnone;  
    16. }  
    17. .drop ul ul li {  
    18.   floatnone;  
    19.   positionrelative;  
    20.   border-top1px solid#000000;  
    21.   border-bottom1px solid#000000;  
    22. }  
    23. .drop ul li {  
    24.   positionrelative;  
    25. }  
    26. .drop ul ul {  
    27.   top: 38px;  
    28.   positionabsolute;  
    29.   background#000000;  
    30.   border-radius: 0px;  
    31.   padding0;  
    32. }  
    33. .drop ul {  
    34.   list-stylenone;  
    35.   positionrelative;  
    36.   displayinline-table;  
    37.   background#000000;  
    38.   padding0 20px;  
    39.   border-radius: 10px;  
    40. }  
    41. .drop ul ul li a {  
    42.   padding10px 10px;  
    43.   color#fff;  
    44.   width100px;  
    45.   text-aligncenter;  
    46. }  
    47. .drop ul ul li a:hover {  
    48.   background#cfc5c5;  
    49.   color#000000;  
    50. }  
    51. .drop ul li:hover {  
    52.   background#cfc5c5;  
    53.   color#000000;  
    54. }  
    55. .drop ul li a:hover {  
    56.   color#000000;  
    57. }  
Output
 
HTML and CSS code of drop down list