Scribd
Upload
55 views3 pages

Dropdown Menu

The document provides code to create a drop down menu within an unordered list. Styling is applied to the list items and links to create floating navigation buttons. Additional styling is applied to create a dropdown content area below one of the list items. When hovering over the dropdown button or content, the dropdown becomes visible.

Uploaded by

Sakil Ahmed
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
55 views3 pages

Dropdown Menu

The document provides code to create a drop down menu within an unordered list. Styling is applied to the list items and links to create floating navigation buttons. Additional styling is applied to create a dropdown content area below one of the list items. When hovering over the dropdown button or content, the dropdown becomes visible.

Uploaded by

Sakil Ahmed
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

3. Creation of Drop Down Menu.

Ans: <html>

<head>

<style>

ul {

list-style-type: none;

margin: 0;

padding: 0;

overflow: hidden;

background-color: #585858;

li {

float: left;

li a{

display: block;

color: white;

text-align: center;

padding: 14px 16px;

text-decoration: none;

.dropbtn

display: block;

color: white;
text-align: center;

padding: 14px 16px;

text-decoration: none;

li a:hover, .dropdown:hover .dropbtn {

background-color: red;

.dropdown-content {

display: none;

position: absolute;

background-color: #e9f9f9;

min-width: 160px;

box-shadow: 0px 8px 16px 0px;

.dropdown-content a {

color: black;

padding: 12px 16px;

text-decoration: none;

display: block;

text-align: left;

.dropdown-content a:hover {background-color: #b1f234}

.dropdown:hover .dropdown-content {

display: block;

}
</style>

</head>

<body>

<center><h2>Dropdown Menu</h2></center>

<center><i><b><p>Move the mouse over the button to open the dropdown


menu</p></b></i></center><br>

<ul>

<li><a href="#home">Home</a></li>

<li><a href="#news">News</a></li>

<li class="dropdown">

<a href="#" class="dropbtn">Department</a>

<div class="dropdown-content">

<a href="#" >Student registration</a>

<a href="#">Marks genration</a>

<a href="#">Attendance report</a>

</div>

</li>

</ul>

</body>

</html>

You might also like