Post
Ask Question

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="[email protected]">Home</a>  
    15.                     </li>  
    16.                     <li>  
    17.                         <a href="[email protected]">About us</a>  
    18.                         <ul>  
    19.                             <li>  
    20.                                 <a href="[email protected]">Contect</a>  
    21.                             </li>  
    22.                             <li>  
    23.                                 <a href="[email protected]">Features</a>  
    24.                             </li>  
    25.                             <li>  
    26.                                 <a href="[email protected]">About Campus</a>  
    27.                             </li>  
    28.                             <li>  
    29.                                 <a href="[email protected]">Demo</a>  
    30.                             </li>  
    31.                         </ul>  
    32.                     </li>  
    33.                     <li>  
    34.                         <a href="[email protected]">Contect</a>  
    35.                         <ul>  
    36.                             <li>  
    37.                                 <a href="[email protected]">Director</a>  
    38.                             </li>  
    39.                             <li>  
    40.                                 <a href="[email protected]">Principal</a>  
    41.                             </li>  
    42.                             <li>  
    43.                                 <a href="[email protected]">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.   display: none;  
    3. }  
    4. .drop ul li:hover ul {  
    5.   display: block;  
    6. }  
    7. .drop ul li {  
    8.   float: left;  
    9. }  
    10. .drop ul li a {  
    11.   color: #ffffff;  
    12.   display: block;  
    13.   padding: 10px 10px;  
    14.   position: relative;  
    15.   text-decoration: none;  
    16. }  
    17. .drop ul ul li {  
    18.   float: none;  
    19.   position: relative;  
    20.   border-top: 1px solid#000000;  
    21.   border-bottom: 1px solid#000000;  
    22. }  
    23. .drop ul li {  
    24.   position: relative;  
    25. }  
    26. .drop ul ul {  
    27.   top: 38px;  
    28.   position: absolute;  
    29.   background: #000000;  
    30.   border-radius: 0px;  
    31.   padding: 0;  
    32. }  
    33. .drop ul {  
    34.   list-style: none;  
    35.   position: relative;  
    36.   display: inline-table;  
    37.   background: #000000;  
    38.   padding: 0 20px;  
    39.   border-radius: 10px;  
    40. }  
    41. .drop ul ul li a {  
    42.   padding: 10px 10px;  
    43.   color: #fff;  
    44.   width: 100px;  
    45.   text-align: center;  
    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
Next Recommended Reading Highlight HTML Table Alternate Row Colors Using CSS Selector