CSS
Topperworld.in
Dropdowns
⚫ Dropdowns are one of the most important parts of an interactive website.
CSS is used to design the drop-down menus.
⚫ A drop-down is a bunch of lists under an unordered list i.e. <ul> as it is
popularly known in HTML world.
⚫ Nested list (<li>) tags under the <ul> tag used to create drop-down
structure. To bring out the effects use CSS for the components present in
the structure.
⚫ The CSS is very straightforward property used to create the drop-down
menu.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Dropdown property</title>
</head>
<body>
<nav>
<ul>
<li class="Lev-1">
<a href="">Level-1</a>
©Topperworld
CSS
<ul>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
<li><a href="">Link 4</a></li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
Output:
❖ Right-aligned Dropdown
The right-aligned dropdown is a dropdown the float value is right to display
drop-down content on the right screen.
Add float right to the div which holds the content.
Example:
©Topperworld
CSS
<!DOCTYPE html>
<html>
<head>
<title>right-aligned dropdown content property</title>
<style>
#drop {
background-color: teal;
color: white;
padding: 10px;
font-size: 16px;
width: : 200px;
height: : 60px;
border-radius: 5px;
font-size: 20px;
}
#drop-down {
position: relative;
display: inline-block;
}
#dropdown-menu {
display: none;
position: absolute;
background-color: #666;
width: 160px;
margin-left: -45px;
border-radius: 5px;
z-index: 1;
©Topperworld
CSS
}
#dropdown-menu a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.tw {
font-size: 40px;
font-weight: bold;
color: #009900;
Text-align: center;
}
p{
font-size: 20px;
font-weight: bold;
text-align: center;
}
#dropdown-menu a:hover {
background-color: #ddd;
}
#drop-down:hover #dropdown-menu {
display: block;
}
</style> ©Topperworld
CSS
</head>
<body>
<div class="tw">Topper World</div>
<p>Right-aligned Dropdown content
property</p>
<div id="drop-down"
style=" float: right;
margin-right: 70px;">
<button id="drop">DropDown</button>
<div id="dropdown-menu">
<a href="">Item 1</a>
<a href="">Item 2</a>
<a href="">Item 3</a>
<a href="">Item 4</a>
</div>
</div>
</body>
</html>
©Topperworld
CSS
Output:
❖ Image Dropdown
It is not a dropdown but enlarges the image on which you hover. Needs
basic CSS and an image to make it work.
❖ Clicked Drop-downs:
This requires a basic understanding of JavaScript as it is used to run some
functions to make the clicked drop-down work.
Note: Some important highlights of the code:
• The javascript function will expand and collapse the menu when the
button “Click Me” is clicked.
• We use onclick to call the javascript function in the button tag.
©Topperworld
