HOW TO MAKE A HOVERABLE DROPDOWN MENU IN CSS
Published: 2024-03-12 23:30:06


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>

```