HTML 5

Drop Down Menu using CSS

Introduction

A drop-down menu is a graphical control elements .It is similar to a list box, which collect multiple values and allow the user to choose one value from a list. When a drop-down list is inactive, it displays a single value. 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.   
    3. <!DOCTYPE html>  
    4.   
    5. <html xmlns="http://www.w3.org/1999/xhtml">  
    6. <head runat="server">  
    7.     <link href="pop.css" rel="stylesheet" />  
    8.   
    9.     <title></title>  
    10. </head>  
    11. <body>  
    12.     <form id="form1" runat="server">  
    13.         <div class="drop">  
    14.             <ul>  
    15.                 <li><a href="[email protected]">Home</a></li>  
    16.                 <li><a href="[email protected]">About us</a>  
    17.                     <ul>  
    18.                         <li><a href="[email protected]">Contect</a></li>  
    19.                         <li><a href="[email protected]">Features</a></li>  
    20.                         <li><a href="[email protected]">About Campus</a></li>  
    21.                         <li><a href="[email protected]">Demo</a></li>  
    22.                     </ul>  
    23.                 </li>  
    24.                 <li><a href="[email protected]">Contect</a>  
    25.                     <ul>  
    26.                         <li><a href="[email protected]">Director</a></li>  
    27.                         <li><a href="[email protected]">Principal</a></li>  
    28.                         <li><a href="[email protected]">Management</a></li>  
    29.                     </ul>  
    30.                 </li>  
    31.             </ul>  
    32.   
    33.         </div>  
    34.     </form>  
    35. </body>  
    36. </html>  
  •  The CSS Styling
    1. .drop ul ul {  
    2.     display: none;  
    3. }  
    4.   
    5. .drop ul li:hover ul {  
    6.     display: block;  
    7. }  
    8.   
    9. .drop ul li {  
    10.     float: left;  
    11. }  
    12.   
    13.     .drop ul li a {  
    14.         color:#ffffff;  
    15.         display: block;  
    16.         padding: 10px 10px;  
    17.         position: relative;  
    18.         text-decoration: none;  
    19.     }  
    20.   
    21. .drop ul ul li {  
    22.     float: none;  
    23.     position: relative;  
    24.     border-top: 1px solid#000000;  
    25.     border-bottom: 1px solid#000000;  
    26. }  
    27.   
    28. .drop ul li {  
    29.     position: relative;  
    30. }  
    31.   
    32. .drop ul ul {  
    33.     top:38px;  
    34.     position: absolute;  
    35.     background:#000000;  
    36.     border-radius: 0px;  
    37.     padding: 0;  
    38. }  
    39.   
    40. .drop ul {  
    41.     list-style: none;  
    42.     position: relative;  
    43.     display: inline-table;  
    44.     background: #000000;  
    45.     padding: 0 20px;  
    46.     border-radius:10px;  
    47.      
    48. }  
    49. .drop ul ul li a {  
    50.             padding: 10px 10px;  
    51.             color: #fff;  
    52.             width:100px;  
    53.             text-align:center;  
    54.         }     
    55. .drop ul ul li a:hover {background:#cfc5c5;  
    56.                     color:#000000;  
    57. }  
    58. .drop ul li:hover {  
    59.     background:#cfc5c5;  
    60.     color:#000000;  
    61. }  
    62. .drop ul li a:hover {color:#000000;}  

Output

HTML and CSS code of drop down list
Ebook Download
View all
Learn
View all
Get Started

You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

Become a sharper developer and jumpstart your career.

Basic

$0

$

. 00

monthly

For Basic members:

  • Standard Profile
  • Access learning courses
  • Access free e-books
  • 1x point
Premium

$20

$

. 00

monthly

For Premium members:

  • Earn 2x reward points
  • Premium profile with Verified check
  • Premium Avatar with status update
  • Learning courses
  • Unlimited Certifications and badges on profile
  • Unlimited Book downloads
  • Access to Premium content
  • Online Training
  • Unlimited PDF conversions and downloads
  • Professional Resume Writing
  • Interview Preparations Guide
  • 25 messages per month
  • 1 "Kodzu" avatar, basic
Elite

$45

$

. 00

monthly

For Elite members:

  • Bundle E-books
  • Access to all Learn Series
  • Unlimited Apply Jobs