Dropdown Menu

Dropdown Menu:

Create a dropdown menu that allows the user to choose an option from a list.

Example 1
<!DOCTYPE html>

<html>

<head>

<style>

.dropdown { position: relative; display: inline-block; }

.dropdown-content

{ display: none; position: absolute;

background-color: #f9f9f9;

min-width: 160px;

box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); }

.dropdown:hover

.dropdown-content { display: block; }

.desc { padding: 15px; text-align: center; }

</style>

</head>

<body>

<h2>Dropdown Image</h2>

<p>Move the mouse over the image below to open the dropdown content.</p>

<div class=”dropdown”>

<img src=”dohhh.jpg” alt=”beautiful wallpaper” width=”100″ height=”50″> <div class=”dropdown-content”>

<img src=”dohhh.jpg” alt=”beautiful wallpaper” width=”300″ height=”200″>

<div class=”desc”>Beautiful Trolltunga, Norway</div>

</div>

</div>

</body>

</html>

 

Example 2

<!DOCTYPE html>

<html>

<head>

<style>

.dropbtn { background-color: #4CAF50;

color: white;

padding: 16px;

font-size: 16px;

border: none;

cursor: pointer; }

.dropdown { position: relative;

display: inline-block; }

.dropdown-content

{ display: none;

position: absolute;

right: 0;

background-color: #f9f9f9;

min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); }

.dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; }

.dropdown-content a:hover {background-color: #f1f1f1} .dropdown:hover .dropdown-content { display: block; } .dropdown:hover .dropbtn { background-color: #3e8e41; }

</style>

</head>

<body>

<h2> The left Aligned Dropdown Content</h2>

<div class=”dropdown” style=”float:left;”>

<button class=”dropbtn”>LeftLink 1</a>

<a href=”#”>Link 2</a>

<a href=”#”>Link 3</a>

</div>

</div>

</body>

</html>

 

 

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *