CSS Menu Design - O Level (NIELIT)

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:

Qus. 1 : ____tag embeds CSS in a webpage.

<html>
<style>
<css>
<xml>

Programs

Create a basic webpage showcasing "Responsive Web Design"

View Solution