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.
html
<!DOCTYPE html>
< html >
< head >
< title >Dropdown property</ title >
</ head >
< body >
< nav >
< ul >
< li class = "Lev-1" >
< a href = "" >Level-1</ a >
< 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:
Example: Adding CSS property in HTML structure to create interactive drop-down structure.
html
<!DOCTYPE html>
< html >
< head >
< title >Navigation property</ title >
< style >
a {
color: white;
background-color: #990;
text-decoration: none;
}
nav {
background: #333;
}
nav>ul {
margin: 0 auto;
width: 80px;
}
nav ul li {
display: block;
float: left;
margin-left: -40px;
position: relative;
}
nav ul a {
display: block;
float: left;
width: 150px;
padding: 10px 20px;
}
nav ul a:hover {
background: #090;
}
nav ul li ul li {
float: none;
}
nav ul li ul {
display: none;
position: absolute;
background: #333;
top: 42px;
}
nav ul li:hover>ul {
display: block;
}
nav ul li a {
display: block;
}
.gfg {
font-size: 40px;
font-weight: bold;
color: #009900;
Text-align: center;
}
p {
font-size: 20px;
font-weight: bold;
text-align: center;
}
</ style >
</ head >
< body >
< div class = "gfg" >GeeksforGeeks</ div >
< p >Dropdown Navigation property</ p >
< nav >
< ul >
< li class = "Lev-1" >
< a href = "" >Level-1</ a >
< 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:
The above-written code produces a proper output on the basis of a drop-down structure. Important parts of HTML code are discussed below:
- nav is the outermost container
- nav ul li ul li – float is set to none so that it remains intact when we hover over it.
- Use relative position so that li moves or changes its position relative to its component.
- Use ‘>’ after hover to see the effect of hover on the immediate next ul of the li.
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.
html
<!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;
}
#dropdown-menu a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.gfg {
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 >
</ head >
< body >
< div class = "gfg" >GeeksforGeeks</ 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 >
|
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.
Example:
html
<!DOCTYPE html>
< html >
< head >
< title >Image Dropdown</ title >
< style >
.dropmenu {
position: relative;
display: inline-block;
margin-left: 150px;
}
.sub-dropmenu {
display: none;
position: absolute;
}
.dropmenu:hover .sub-dropmenu {
display: block;
}
.enlarge {
padding: 15px;
text-align: center;
}
.gfg {
margin-left: 40px;
font-size: 30px;
font-weight: bold;
}
</ style >
</ head >
< body >
< div class = "gfg" >Image Dropdown property</ div >
< div class = "dropmenu" >
< img src =
width = "150"
height = "50" align = "middle" >
< div class = "sub-dropmenu" >
< img src =
width = "600"
height = "200" >
</ div >
</ div >
</ body >
</ html >
|
Output:
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.
Example:
html
<!DOCTYPE html>
< html >
< head >
< title >clicked dropdown</ title >
< style type = "text/css" >
button {
background: #009900;
width: 200px;
height: 60px;
color: white;
border: 1px solid #fff;
font-size: 20px;
border-radius: 5px;
}
ul li {
list-style: none;
}
ul li a {
display: block;
background: #c99;
width: 200px;
height: 50px;
text-decoration: none;
text-align: center;
padding: 10px;
border-radius: 5px;
text-align: center;
color: white;
font-size: 25px;
}
ul li a {
text-decoration: none;
}
ul li a:hover {
background: #009900;
}
.open {
display: none;
}
.gfg {
font-size: 40px;
font-weight: bold;
color: #009900;
Text-align: center;
}
p {
font-size: 20px;
font-weight: bold;
text-align: center;
}
</ style >
< script type = "text/javascript" >
function open_menu() {
let clicked = document.getElementById('drop-menu');
if (clicked.style.display == 'block') {
clicked.style.display = 'none';
}
else {
clicked.style.display = 'block';
}
}
</ script >
</ head >
< body >
< div class = "gfg" >GeeksforGeeks</ div >
< p >Clicked Dropdown content property</ p >
< div id = "dropdown" >
< button onclick = "open_menu()" >Click Me!</ button >
< div class = "open" id = "drop-menu" >
< ul >
< li >< a href = "" >Item-1</ a ></ li >
< li >< a href = "" >Item-2</ a ></ li >
< li >< a href = "" >Item-3</ a ></ li >
< li >< a href = "" >Item-4</ a ></ li >
</ ul >
</ div >
</ div >
</ body >
</ html >
|
Output:
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.
Last Updated :
21 Jul, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...