Create a Subnavigation Menu with CSS

A subnavigation menu is a menu that appear just below the main menu. The menu is created using the <nav> element on a web page. Consider it as a secondary menu or a submenu. The submenus appear on mouse hovering any of the menus from the main menu. This is set using the :hover selector.

Create a menu

A menu on a web page is created using the <nav> element. For the submenus, a div container is created and the menu links are set using the <a> element −

<nav>
   <a class="links" href="#">Home</a>
   <a class="links" href="#">Contact</a>
   <a class="links" href="#">About Us</a>
   <a class="links" href="#">More Info</a>
   <div class="subnav">
      <button class="sub-btn">Our Social Media></button>
      <div class="sub-content">
         <a class="links" href="#">Facebook</a>
         <a class="links" href="#">Twitter</a>
         <a class="links" href="#">LinkedIn</a>
         <a class="links" href="#">Instagram</a>
      </div>
   </div>
</nav>

Style the menu

To style the menus, you need to style the <nav>. The links are positioned to the left using the float property with the value left. The text-decoration property is set to none to remove the underline from the links −

nav {
   overflow: hidden;
   background-color: rgb(0, 52, 73);
}
nav .links {
   float: left;
   font-size: 16px;
   color: white;
   text-align: center;
   padding: 14px 16px;
   text-decoration: none;
}

Create the submenu

As shown above, the submenus are created within a container. The submenu links are set using the <a> element with the href attribute −

<div class="subnav">
   <button class="sub-btn">Our Social Media></button>
   <div class="sub-content">
      <a class="links" href="#">Facebook</a>
      <a class="links" href="#">Twitter</a>
      <a class="links" href="#">LinkedIn</a>
      <a class="links" href="#">Instagram</a>
   </div>
</div>

Style the submenu

The submenus are positioned to the left using the float property with the value left −

.subnav {
   float: left;
   overflow: hidden;
}
.subnav .sub-btn {
   font-size: 16px;
   border: none;
   outline: none;
   color: white;
   padding: 14px 16px;
   background-color: rgb(0, 109, 67);
   margin: 0;
}

Position the content of the submenu

The actual content i.e., the submenu is positioned to be absolute using the position property. Such submenu is invisible when the page loads, therefore the display property is set to none. The submenu links are positioned to the left using the float property −

.sub-content {
   display: none;
   position: absolute;
   left: 0;
   background-color: rgb(0, 156, 83);
   width: 100%;
   z-index: 1;
}
.sub-content a {
   float: left;
   color: white;
   text-decoration: none;
}

Example

The following is the code to produce bottom bordered (underline) navigation links with CSS −

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         font-family: Arial, Helvetica, sans-serif;
         margin: 0;
      }
      nav {
         overflow: hidden;
         background-color: rgb(0, 52, 73);
      }
      nav .links {
         float: left;
         font-size: 16px;
         color: white;
         text-align: center;
         padding: 14px 16px;
         text-decoration: none;
      }
      .subnav {
         float: left;
         overflow: hidden;
      }
      .subnav .sub-btn {
         font-size: 16px;
         border: none;
         outline: none;
         color: white;
         padding: 14px 16px;
         background-color: rgb(0, 109, 67);
         margin: 0;
      }
      nav .links:hover,
      .subnav:hover .sub-btn {
         background-color: rgb(101, 219, 255);
         color: black;
         font-weight: bolder;
      }
      .sub-content {
         display: none;
         position: absolute;
         left: 0;
         background-color: rgb(0, 156, 83);
         width: 100%;
         z-index: 1;
      }
      .sub-content a {
         float: left;
         color: white;
         text-decoration: none;
      }
      .sub-content a:hover {
         background-color: #eee;
         color: black;
      }
      .subnav:hover .sub-content {
         display: block;
      }
   </style>
</head>
<body>
   <nav>
      <a class="links" href="#">Home</a>
      <a class="links" href="#">Contact</a>
      <a class="links" href="#">About Us</a>
      <a class="links" href="#">More Info</a>
      <div class="subnav">
         <button class="sub-btn">Our Social Media</button>
         <div class="sub-content">
            <a class="links" href="#">Facebook</a>
            <a class="links" href="#">Twitter</a>
            <a class="links" href="#">LinkedIn</a>
            <a class="links" href="#">Instagram</a>
         </div>
      </div>
   </nav>
</body>
</html>
Updated on: 2023-12-14T12:20:35+05:30

1K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements