How To Create Dropdown Menu in HTML CSS

Hello Viewers, today we will learn how to create a dropdown menu in HTML CSS. You easily create this dropdown menu in HTML CSS by following these tutorials and steps. You will build this dropdown menu by just following these steps which I am given below. In addition, common HTML and CSS programming codes have been used. It is designed in a completely modern way.

As you know, The dropdown menu is important for any kind of website. Every website has a navbar for providing a graphical user interface.

Some information about this dropdown menu

As you can see in the image, this is a dropdown menu in HTML CSS. There are menu items, one background image, and some dummy text on the webpage. But when you will hover over a specific menu link then the submenu will appear. Basically, at first, the submenu is hidden but when you hover a menu item a specific menu’s submenu will appear. This is the only CSS for the dropdown menu.

You might like this:

dropdown menu in Html CSS | Source Codes

To create this program (dropdown menu in Html CSS). First, You have to create an HTML and CSS File For this design. After creating these files just paste the following codes in your file. First, create an HTML file with the name of index.html and paste the given codes into your HTML file. Remember, you’ve to create a file with .html extension.

HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Smooth Menu</title>
    <!----CSS link----->
    <link rel="stylesheet" href="style.css">
    <!---Fontawsome CDN Link---->
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css">
</head>
<body>

<nav>
         <label class="logo">Porto</label>
         <ul>
            <li><a class="active" href="#">Home</a></li>
            <li><a href="#">Element</a></li>
            <li>
               <a href="#">Features
               <i class="fas fa-caret-down"></i>
               </a>
               <ul>
                  <li><a href="#">Python</a></li>
                  <li><a href="#">JQuery</a></li>
                  <li><a href="#">Javascript</a></li>
               </ul>
            </li>
            <li>
               <a href="#">Web Design
               <i class="fas fa-caret-down"></i>
               </a>
               <ul>
                  <li><a href="#">Front End</a></li>
                  <li><a href="#">Back End</a></li>
                  <li>
                     <a href="#">Others
                     <i class="fas fa-caret-right"></i>
                     </a>
                     <ul>
                        <li><a href="#">Links</a></li>
                        <li><a href="#">Works</a></li>
                        <li><a href="#">Status</a></li>
                     </ul>
                  </li>
               </ul>
            </li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Portfolio</a></li>
         </ul>
      </nav>
      <section></section>

</body>
</html>

Second Step, you have to create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

CSS CODE:
*{
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
  }
  body{
    font-family: sans-serif;
    overflow: hidden;
    user-select: none;
  }
  nav .logo{
    color: white;
    font-size: 33px;
    font-weight: bold;
    line-height: 70px;
    padding-left: 110px;
  }
  nav{
    height: 70px;
    background: #134156;
    box-shadow: 0 3px 15px rgba(0,0,0,.4);
  }
  nav ul{
    float: right;
    margin-right: 60px;
  }
  nav ul li{
    display: inline-block;
  }
  nav ul li a{
    color: white;
    display: block;
    padding: 0 15px;
    line-height: 70px;
    font-size: 20px;
    background: #134156;
    transition: .5s;
  }
  nav ul li a:hover,
  nav ul li a.active{
    color: #23dbdb;
  }
  nav ul ul{
    position: absolute;
    top: 85px;
    border-top: 3px solid #23dbdb;
    opacity: 0;
    visibility: hidden;
  }
  nav ul li:hover > ul{
    top: 70px;
    opacity: 1;
    visibility: visible;
    transition: .3s linear;
  }
  nav ul ul li{
    width: 150px;
    display: list-item;
    position: relative;
    border: 1px solid #042331;
    border-top: none;
  }
  nav ul ul li a{
    line-height: 50px;
  }
  nav ul ul ul{
    border-top: none;
  }
  nav ul ul ul li{
    position: relative;
    top: -70px;
    left: 150px;
  }
  nav ul ul li a i{
    margin-left: 45px;
  }
  section{
    background: url(https://themes.muffingroup.com/be/leasing/wp-content/uploads/2020/09/leasing-slider-bg.jpg);
    background-position: center;
    background-size: cover;
    height: 100vh;
  }

now you’ve successfully created this dropdown menu in HTML CSS. If your code does not work or faced any error/problem to comment down or contact us through the contact page.

Related Articles

Popular Now

Categories

ABOUT US

Dainikchorcha.com is a blog where we post blogs related to Web design and graphics. We offer a wide variety of high quality, unique and updated Responsive WordPress Themes and plugin to suit your needs.

Contact us: [email protected]

FOLLOW US