Step 1: Create the body of the dropdown menu. In this case, we will give it a class of “menu”.
<div class="menu">
</div>
Step 2: Create a button for the menu in the body of the dropdown menu we created above
<div class="menu">
<button>Looking for more</button>
</div>
Step 3: Add the menu item list in the dropdown menu, in this case, we will give it a class of “menuContent”
<div class="menu">
<button>Looking for more</button>
<div class="menuContent">
<div>Eguisi</div>
<div>Afang</div>
<div>Okro soup</div>
<div>Fried rice</div>
<div>Turkey</div>
</div>
</div>
Step 4: time for styling. We will set the “menu” class to display: inline-block and position: relative;
.menu{
display: inline-block;
position: relative;
}
Step 5: we will style the button to our choice, for example;
button{
background-color: blue;
width: 330px;
font-size: 40px;
}
Step 6: we will style the “menuContent” class.
.menuContent{
font-size: 35px;
display: none;
position: absolute;
background-color: gray;
}
Note: your styling can be different from this but what is compulsory is the “display: none” property, and "position: absolute"; so we can place the menuContent directly under the menu div with CSS
Step 7: we will make it such that the menu content will be displayed only when the menu button is been hovered
.menu:hover .menuContent{
display: block;
}
We can add more interactivity to the menu list content, for example;
Step 8: We can add class to the items ;
<div class="menu">
<button>Looking for more</button>
<div class="menuContent">
<div class="menuList">Eguisi</div>
<div class="menuList">Afang</div>
<div class="menuList">Okro soup</div>
<div class="menuList">Fried rice</div>
<div class="menuList">Turkey</div>
</div>
</div>
and style them when hovered.
.menuList:hover{
background-color: red;
}
This is the code put together;
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.menu{
display: inline-block;
}
button{
background-color: blue;
width: 330px;
font-size: 40px;
}
.menuContent{
font-size: 35px;
display: none;
background-color: gray;
}
.menu:hover .menuContent{
display: block;
}
.menuList:hover{
background-color: red;
}
</style>
</head>
<body>
<div class="menu">
<button>Looking for more</button>
<div class="menuContent">
<div class="menuList">Eguisi</div>
<div class="menuList">Afang</div>
<div class="menuList">Okro soup</div>
<div class="menuList">Fried rice</div>
<div class="menuList">Turkey</div>
</div>
</div>
</body>
</html>
Top comments (0)