Use Dropdown in CSS
In this article, TipsMake.com will work with you to create lists / drop down menus when hovering over a certain element using CSS.
Basic dropdown box
Create a dropdown box that appears when the user moves the mouse over an element.
Css
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #e9d8f4;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
Dropdown Menu
Create a drop-down menu that allows users to select an option from the list. This is an indispensable solution in website design, especially websites with a large number of indexes, can not be arranged entirely on the interface.
css
.dropbtn {
background-color: #58257b;
color: white;
font-weight: bold;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #e9d8f4;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #58257b;
color: white;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #984eca;
}
Align drop content
If you want the menu bar to drop down in the right to left direction instead of left to right, you can add the right: 0 attribute.
.dropdown-content {
right: 0;
}
For example :
.dropbtn {
background-color: #58257b;
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: #e9d8f4;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #58257b;
color: white;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #984eca;
}
Photo Dropdown
Add images and other content in the drop down box.
css
.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);
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
.desc {
padding: 15px;
text-align: center;
}
Dropdown navigation bar
Add a drop-down menu inside the navigation bar - navigation bar.
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #58257b;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: #ce3e6e;
color: white;
font-weight: bold;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #e9d8f4;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #db7093;
color: white;
}
.dropdown:hover .dropdown-content {
display: block;
}
4 ★ | 1 Vote
You should read it
- PhotoShop - Create a title for the menu
- How to fix the loss of the New menu in the right-click menu
- Macromedia Flash - Create menu effects
- Portable tips: Customize Menu in Office 2007
- Navigation Bar - Navigation Bar in CSS
- The context menu of Windows 11 will have a new eye-catching design
- This small application helps bring the context menu interface of Windows 10 to Windows 11
- How to collapse menus on Windows 10?
May be interested
- How to play Pokemon GO in Landscape Mode on the iPhonealthough players can play pokemon go in portrait mode. however, if you want to watch and play games on a large and eye-catching screen, players can switch to playing games in landscape mode.
- The secret to controlling Pokemon Go employees at workthese days, hr managers are faced with an extremely painful problem that is the status of priority employees playing pokemon go more than work. this has caused a small impact on productivity and efficiency.
- Check out the 'buffalo' Pokémon in Pokémon Goeach type of pokemon has hp, cp, ability to attack and endure differently. based on these indicators, players can determine as well as choosing the most powerful pokemon for their offensive tactics.
- Sitting home can also locate Pokemon around, do you believe it?the tightening of the niantic developers' rules to prevent players from abusing the support tools also brings annoyance, such as those who have no conditions to move much, go away, it is hard to know. get the location of the pokemon around the area they live in
- 5 undeniable benefits when playing Pokemon Goget to know many new people, breathe fresh air, relieve stress, increase concentration thanks to going out for a walk .... are compelling reasons to force you to try pokemon go now .
- Want to earn the fastest Pokécoins in Pokémon Go? So don't miss this article!pokécoins in pokémon go play the role of buying items in the store. the more coins you earn, the more likely you are to buy more items. to earn pokécoins, players will have to complete certain tasks or buy real money.
- Pokémon systems when fighting in Pokémon Goeach pokémon system in pokémon go has different strengths, along with a specific weakness. this type of pokémon will have the power to attack the other pokémon, but can defeat the other pokémon. if you know the characteristics of each type, it will be easier to choose which pokémon to battle.
- The terms you need to know when playing Pokémon Gopokémon go is the most prominent name in recent days. this game of capturing and training virtual animals has created a relatively new way of playing, as players have to constantly move to catch pokémon. during the process of joining pokémon go, you will encounter and use a lot of important terms. so what do they mean?
- How to play Pokemon GO on Windows computersrecently, pokemon go has become a popular game, attracting thousands of gamers around the world. in previous posts network administrator has guided you on how to play pokemon go on android devices and ios devices. in the article below, network administrator will guide you how to play pokemon go on windows computers using bluestacks emulator software.
- How to become a good Pokémon Go hunter?with a new way of playing, pokémon go has created a new phenomenon in the game village around the world. players will have to go around and find pokémon for themselves. so how to quickly catch pokémon and in large numbers?