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