Posted By: Akash Singh Published: 14, Jan 2024

Step 1: HTML code for Dropdown Menu.

if you are going to design menu first time .then it will be a little confusing for you. So you have to learn to make basic navigation . for this type of menu we will create a list of links using the unordered list.

                           <nav>         
									  <ul> 
									  <li>Home</li>
									  <li>About</li> 
									  <li>Services</li>
									  <li>Articles</li>
									  <li>Contact</li>
									  </ul> 
								  </nav>
   

Step 2: To add background color in Nav Element

                         nav {
			      background-color: #3e64a19;
			     }

Step 3:We will remove default margin,padding and list-style from ul.

                           nav ul {
			       padding: 0;
			        margin: 0;
			       list-style: none;
				  }

Step 4: Will Styling the list item li.

                            nav ul li{
				  font: bold 12px sans-serif;
				  display: inline-block;
				  position: relative;
				  padding: 15px 20px;
				  color: #fff;
				       }  

Step 5: To add submenu.

                           <nav> 
			     <ul> 
			     <li>Home</li>
			     <li>About</li> 
			     <li>Services
			      <ul>
			      <li><a href="#">web designing<li>
			      <li><a href="#">graphic designing<li>
			      <li><a href="#">digital Marketing <li>
			      <li><a href="#">technology consultation<li>
			       </li>
			      <li>Articles</li>
			      <li>Contact</li>
		              </ul> 
			    </nav

Step 6: Setting the position of submenu and keeping the default hide.

                           ul li ul{
                               padding: 0;
                               position: absolute;
                               top: 44px;
                               left: 0;
                               width: 200px;
                               display: none;
                                   } 

Step 7: when we will hover hover then change background-color and show dropdown.

                              ul li: hover ul{										 
				 display: block;
				     }
			      ul li: hover {
				 background-color:#383838;
				 color: #fff;
				    }

Step 8 : To changing the styling of dropdown and their list-items.

                              ul li ul li {
                                 background:#383838;
                                 display: block;
				 color: #fff;
				         }
			      ul li ul li: hover{
                                   background-color :#272423;
	                                  }

Step 9: To styling Links.

				ul li ul li a{
				   color: #fff;
				   text-decoration: none;
			           display: block;
					}