Scribd
Upload
23 views3 pages

CSS Dropdown Menu Example

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
23 views3 pages

CSS Dropdown Menu Example

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

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