Drop Down Menu using CSS

Ankur Soni
Sep 03, 2014
7.1k
0
0
Blog

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:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Drop.aspx.cs" Inherits="drop.Drop" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link href="pop.css" rel="stylesheet" />
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div class="drop">
<ul>
<li><a href="[email protected]">Home</a></li>
<li><a href="[email protected]">About us</a>
<ul>
<li><a href="[email protected]">Contect</a></li>
<li><a href="[email protected]">Features</a></li>
<li><a href="[email protected]">About Campus</a></li>
<li><a href="[email protected]">Demo</a></li>
</ul>
</li>
<li><a href="[email protected]">Contect</a>
<ul>
<li><a href="[email protected]">Director</a></li>
<li><a href="[email protected]">Principal</a></li>
<li><a href="[email protected]">Management</a></li>
</ul>
</li>
</ul>
</div>
</form>
</body>
</html>

The CSS Styling
1. .drop ul ul {
2. display: none;
3. }
5. .drop ul li:hover ul {
6. display: block;
7. }
9. .drop ul li {
10. float: left;
11. }
13. .drop ul li a {
14. color:#ffffff;
15. display: block;
16. padding: 10px 10px;
17. position: relative;
18. text-decoration: none;
19. }
21. .drop ul ul li {
22. float: none;
23. position: relative;
24. border-top: 1px solid#000000;
25. border-bottom: 1px solid#000000;
26. }
28. .drop ul li {
29. position: relative;
30. }
32. .drop ul ul {
33. top:38px;
34. position: absolute;
35. background:#000000;
36. border-radius: 0px;
37. padding: 0;
38. }
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;
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;}