How to create a drop down menu in HTML and CSS

Active Exam May 30, 2021

 

Drop Down Menu Bar

Hello Friends, today in this blog you will learn How to create a drop down menu bar in HTML and CSS.

In the earlier blog, I have shared to delete data from database in PHP using button. In this blog we learn How to create a drop down menu in HTML and CSS from scratch. So Let's start..

In this blog we learn How to create a drop down menu in HTML and CSS. So Here is the code and my work. I hope you are gonna love this and share whit your friends too. So let's Start learning How to create a drop down menu in HTML and CSS from scratch. So Let's start..





STEP 1: Open any code editor

STEP 2: Create a index.html file with html extension

Create a new file index.html, Here is the code
 <!DOCTYPE html>  
 <html>  
 <head>  
      <meta charset="utf-8">  
      <title>Drop Down Menu Bar</title>  
      <meta name="viewport" content="width=device-width, initial-scale=1.0">  
 </head>  
 <body>  
 <div class="container">  
      <header>  
           <h1>brand Name</h1>  
           <nav>  
                <ul class="nav-wrap">  
                     <li><a href="#">Home</a></li>  
                     <li><a href="#">Services</a>  
                          <ul>  
                               <li><a href="#">Design</a></li>  
                               <li><a href="#">SEO</a>  
                                    <ul>  
                                         <li><a href="#">Blogger</a></li>  
                                         <li><a href="#">Website</a></li>  
                                    </ul>  
                               </li>  
                               <li><a href="#">Develope</a></li>  
                          </ul>  
                     </li>  
                     <li><a href="#">About</a></li>  
                     <li><a href="#">Contact</a></li>  
                     <li><a href="#">Blog</a></li>  
                </ul>       
           </nav>  
      </header>  
 </div>  
 </body>  
 </html>
STEP 3: Create a style.css file with CSS extension
 <style type="text/css">  
           *{  
                padding: 0;  
                margin: 0;  
                box-sizing: border-box;  
           }  
           body{  
                font-family: 'verdana',sans-serif;  
                font-size: 16px;  
                background-color: #fff;  
           }  
           .container{  
                width: 100%;  
                height: 100vh;  
                background: linear-gradient(rgba(0,0,255,0.4),rgba(0,0,255,0.4)), url('C:/Users/manis/Desktop/JS/images/b-bycyle.jpg');  
                background-repeat: no-repeat;  
                background-position: center;  
                background-size: cover;  
           }  
           header{  
                width: 100%;  
                height: 70px;  
                background-color: #FFF;  
                padding: 0 100px;  
                display: flex;  
                justify-content: space-between;  
                align-items: center;  
                background-color: #273c75;  
           }  
           header h1{  
                color: #FFF;  
                text-transform: uppercase;  
                font-size: 22px;  
           }  
           nav ul{  
                list-style: none;  
           }  
           nav ul li{  
                float: left;  
                width: 100px;  
                height: 40px;  
                line-height: 35px;  
                text-align: center;  
                position: relative;  
                background-color: #192a56;  
           }  
           nav ul li:hover{  
                background-color: red  
           }  
           nav ul li a{  
                text-decoration: none;  
                color: #FFF;  
                text-transform: uppercase;  
                font-size: 13px;  
           }  
           ul ul ul{  
                position: absolute;  
                top: -5px;  
                left: 101px;  
           }  
           ul ul{  
                display: none;  
                margin-top: 5px;  
           }  
           nav ul li:hover > ul{  
                display: block;  
           }  
      </style>

Post a Comment

0 Comments