CSS Menu Design

Using CSS properties the dropdown menu can be designed.

An example of dropdown menu is shown below in which a submenu is dropped whenever mouse is moved over drop down menu.

Initially the contents of drop down needs to be hide, so display property is used as: 

display: none;

Then using hover state of element, the contents of drop down is shown as:

display: block; 

Code For Dropdown Menu:

<html>
<head>
<style>
*{
margin:0;
padding:0;
}
.dd{
position: relative;
background-color:bisque;
padding:15px;
width:100px;
border-bottom:5px double black;
}
.dd:hover{
background-color: coral;
color: white;
border-left:15px solid black; }
.ddcontents{
position: absolute;
display: none;
margin:15px;
}
.dd:hover .ddcontents{
display: block;
}
.menu{
list-style-type: none;
width:150px;
}
.menu li a{
display: block;
text-decoration: none;
padding:10px;
margin:2px;
background-color: lightgreen;
color: darkgreen;
text-align: center;
}
.menu li a:hover{
border:2px double blue;
border-left:15px solid blue;
background-color: lightblue;
color: darkblue;
}
</style>
</head>
<body>
<h1> Example of DropDown </h1><br>
<p> Move Mouse over the text below to see the dropdown effects. </p><br><br>
<div class="dd"> DropDown
<div class="ddcontents">
<ul class="menu">
<li> <a href="#"> About Us </a> </li>
<li> <a href="#"> Services </a> </li>
<li> <a href="#"> Achievements </a> </li>
<li> <a href="#"> Contact Us </a> </li>
</ul>
</div>
</div>
</body>
</html>

Output:


Programs

CCC Online Test 2021 CCC Practice Test Hindi Python Programming Tutorials Best Computer Training Institute in Prayagraj (Allahabad) Best Java Training Institute in Prayagraj (Allahabad) Best Python Training Institute in Prayagraj (Allahabad) O Level NIELIT Study material and Quiz Bank SSC Railway TET UPTET Question Bank career counselling in allahabad Sarkari Naukari Notification Best Website and Software Company in Allahabad Website development Company in Allahabad