HTML CSS Tutorial: Create Navigation Bar with Sub Menu

3

Do you want to create a beautiful Navigation Bar with Sub Menu using HTML and CSS? In this tutorial, we will teach you in detail how to create Navigation Bar with different Color Sub Menu.

The navigation bar also called Navbar is one of the most important parts of the website as it makes website navigation easy. With the help of Navigation Bar, you can add different types of menu. This can help users to easily go from one article to another article.

HTML CSS Tutorial Create Navigation Bar with Sub Menu

Navigation Bar is also considered a very important part of UI of the website as google manly focus on the website navigation bar to understand the wireframe of the website and display it on the Google result. It’s also recommended by the experts that having easy to use navigation is important for any web site. The navigation bar contains very useful links of the website to help users.

Today you will learn how to create Navbar with a different color of Sub Menu in it. You can see the demo of the tutorial in the video provided to you. In this video, you will see that there is a flat and simple navigation bar with submenus. When you will hover the Navigation bar, on hovering its color gets changed. Also, you will notice that when you hover on submenus, it color too gets changed with colorful background.

Note that, This is not a responsive navbar, this just a design concept.

HTML CSS Navigation Bar With Sub Menu Source Code

Before directly getting into its source code, let’s talk about its folder structure first. You to need to create HTML(index.html) and CSS(style.css) file in any code editor like Visual Code Editor. Here is the image of this project, how your project folder should be. If you still didn’t understand you see video for its live result.

Create Navigation Bar with Sub Menu folder

You can also download its Code by click on the below link: HTML CSS Navigation Bar With Sub Menu Source Code

Create Navigation Bar with Sub Menu final folder

After when you have successfully created two files named as index.html and style.css. Now you are ready to code your Navigation Bar With Sub Menu. Below are the code of this project. I recommend you to write this code by yourself. If you got any error try to fix it by seeing this code.

index.html

Create an HTML file named ‘index.html‘ and put these codes given here below.

<!DOCTYPE html>
<!--Code By BeFirstly ( https://befirstly.com )-->
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Navigation Bar with sub menu| befirstly.com</title>
  <link href="https://fonts.googleapis.com/css?family=Lexend+Deca&amp;display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li>
      <a href="#">Programming</a>
      <ul>
        <li><a href="#">Python</a></li>
        <li><a href="#">Swift</a></li>
        <li><a href="#">JavaScript</a></li>
      </ul>
    </li>
    <li>
      <a href="#">Careers</a>
      <ul>
        <li><a href="#">UI/UX</a></li>
        <li><a href="#">Web Development</a></li>
        <li><a href="#">Graphic Design</a></li>
      </ul>
    </li>
    <li><a href="#">About us</a></li>
    <li><a href="#">Contact us</a></li>
  </ul>
</nav>
<!--Code By BeFirstly ( https://befirstly.com )-->
</body>
</html>

Explanation

First, I have used the HTML navigation official tag for creating navbar <nav> tag. This official tag comes with HTML 5(info). Since this project is not a responsive, all the values are in pixels. <ul> <li>tags are used for creating links and dropdown.

Style.css

/** Code By BeFirstly ( https://befirstly.com ) **/
body {
    background: #f3f3f3;
    font-family: 'Lexend Deca', sans-serif;
  }
  
  nav {
    position: absolute;
    top: 35px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-block;
    border: 2px solid #EBECF1;
    background-color: white;
    border-radius: 30px;
    animation: slideIN 1s ease-out;
  }
  
  ul {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    margin: 0;
    padding: 0 30px;
    list-style-type: none;
  }
  ul li:not(:last-child) {
    margin-right: 40px;
  }
  ul li {
    border: 2px solid transparent;
    border-radius: 5px;
    padding: 10px;
    transition: background 0.2s;
  }
  ul li a {
    color: #1da1f2;
    text-decoration: none;
    text-transform: uppercase;
    transition: color 0.2s;
  }
  ul li ul {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    display: block;
    margin: 12px -12px;
    padding: 0;
    background: black;
    border: 2px solid black;
    border-right: 2px solid black;
    border-bottom: 2px solid black;
    border-radius: 5px;
    transition: opacity 0.2s, visibility 0.2s;
  }
  ul li ul li {
    margin: -2px 0 0 -2px;
    width: calc(100% - 20px);
    line-height: 1.7;
  }
  ul li ul li a {
    color: #1da1f2;
  }
  ul li:hover {
    background: #3b5998;
    border: 2px solid #3b5998;
    border-right: 2px solid #3b5998;
    border-bottom: 2px solid #3b5998;
  }
  ul li:hover a {
    color: #F9F8FD;
  }
  ul li:hover ul {
    visibility: visible;
    opacity: 1;
    box-shadow: 0px 3px 5px 2px #3b5998;
  }
  ul li:hover ul li a {
    color: #F9F8FD;
  }
  
  @keyframes slideIN {
    0% {
      top: -50px;
    }
    40% {
      top: 20px;
    }
    70% {
      top: 10px;
    }
    100% {
      top: 15px;
    }
  }

  /** Code By BeFirstly ( https://befirstly.com ) **/

Explanation

Using CSS, all the elements are placed by given position, padding, margin, display, etc. Different colors are applied to the navigation bar, its sub-menu, and its hover. You can choose the color according to your needs. You can also use border and shadow in the navigation bar to make it more attractive.

Download: Create Navigation Bar with Sub Menu

Output:

We hope this article helped you learn about Create Navigation with Sub Menu to use on your project. You may also want to see our list of other articles too.

Best Free WooCommerce WordPress Themes

Benefits of learning programming language

Best Free WordPress Business Themes

If you liked this article, then please subscribe to our YouTube Channel for video tutorials. You can also find us on Twitter and Facebook.