How to make drop-down menu

First of all, we have to start from HTML structure of the drop-down menu. I decided to make a site without Bootstrap.

                 <nav class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Biography</a></li>
<li><a href="#">Discography</a></li>
<li class="sub-menu"><a href="#">More</a>
                                         <ul>
                    <li><a href="">Video</a></li>
                    <li><a href="">Fanart</a></li>
                                        </ul>
</li>
<li><a href="">Contact</a></li>
</ul>
</nav>



I used special HTML5 tag <nav> for main navigation on the site. Make a notice that the drop-down menu is a list <ul> in another <ul>.
The menu looks like this

Now it's time to add CSS and make our menu responsive and beautiful.

1. Add the color to the background and change the font.


.menu { 
 background-color: #000000; 
 font-family: "Courier New", Courier, monospace; }

2. .menu ul { 
 list-style:none; 
 margin: 0; 
 padding:0; 
 display:flex; 
 flex-wrap: wrap; 
 display: -webkit-flex; /* Safari */ 
 -webkit-flex-wrap: wrap; /* Safari 6.1+ */ }

list-style:none; is used to delete list decoration.
margin: 0; padding:0; to delete margins and paddings.
display:flex; is used for alignment.
flex-wrap: wrap; flexible items will wrap if it's necessary. 

3. .menu ul li {
width: 20%;
}




4. We start to make the menu responsive.

@media (max-width: 40em) {
.menu ul li {
width:100%;
}
}


5. Dropdown menu.
.menu ul li > ul {
display:none;
flex-direction:column;
background:#000000;
position:absolute;
}

display:none; - is used for hiding the drop-down menu.
flex-direction:column; - is used to put it in column.
position:absolute; - is positioned relative to the nearest positioned ancestor.

6. .menu ul li:hover > ul {
display:block;
width: 20%;
}


width 20% is used to make the width of the drop-down menu is equal to items of the main menu.

7. To make the drop-down list responsive.
@media (max-width: 40em) {
.menu ul li:hover > ul {
width:100%;
}



8. .menu a {
text-decoration: none;
display: flex;
padding: 20px;
color: #ffffff;
font-size: 20px;
}

9.
.menu a:hover {
background: #8F3985;
}


10.
.menu .sub-menu li:hover {

width: 100%;
}

.menu .sub-menu li:hover > a {
color: #000000;
background:#8F3985;

}

.menu .sub-menu > a:after {
content: "+";
padding-left: 5px;
}


Template