Horje
How to Create Nested Sub Menu using CSS ?

CSS Nested Sub-Menus refers to Dropdown Menus that are contained within another dropdown menu. These are commonly used in navigation menus to organize and structure content hierarchically. In this article, we are going to build a nested sub-menu using CSS, it will consist of a nav bar with various links such as Home, About Us, Contact, etc.

Preview

Screenshot-2024-01-22-122852

Approach

  • Create a basic structured HTML page with a header and <nav> element, Include a logo, link section, and search icon section in the <nav>.
  • Nest a sub-navigation bar within one of the links to demonstrate the concept of nesting.
  • Apply CSS to set the background colour, align text, and adjust text-decoration to enhance the visual appeal.
  • Use the Poppins font family for the text inside the navigation bar to achieve a clean and modern look and ensure that text is aligned appropriately within each component.
  • Implement a smooth hover effect using the transition property for visual feedback when hovering over links, create transitions to change background colours or add underlines.
  • Introduce nested sub-menus within the link structure to showcase the capability of creating dropdowns.
  • Utilize the `display` property with a transition effect to toggle sub-menus visibility from `none` to `flex` on hover.

Example: Implementation to design nested sub-menu using CSS.

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    
    <!-- Font Awesome CDN -->
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
    <title>Nested Sub Menu</title>
    <link rel="stylesheet" href="style.css">
</head>
  
<body>
    <header class="header">
        <nav class="nav">
            <div class="logo">
                GeeksforGeeks
            </div>
            <ul class="navbar-links">
                <li class="home">
                      <a href="#">Home</a>
                  </li>
                <li class="html">
                    <a href="#" class="html-link">
                        Web Devlopment
                        <i class="fa-solid 
                                  fa-chevron-down html-chevron">
                          </i>
                    </a>
                    <ul class="html-sub-menu">
                        <li><a href="#">HTML</a></li>
                        <li><a href="#">CSS</a></li>
                        <li>
                            <a href="#" class="html-js-link">
                                JavaScript Frameworks
                                <i class="fa-solid fa-chevron-down"></i>
                            </a>
                            <ul class="html-js-sub-menu">
                                <li><a href="#">Angular</a></li>
                                <li><a href="#">Nextjs</a></li>
                                <li><a href="#">jQuery</a></li>
                                <li><a href="#">Express.js</a></li>
                            </ul>
                        </li>
                        <li><a href="#">jQuery</a></li>
                    </ul>
                </li>
                <li class="js">
                    <a href="#" class="js-link">
                        CS Subjects
                        <i class="fa-solid
                                  fa-chevron-down js-chevron">
                          </i>
                    </a>
                    <ul class="js-sub-menu">
                        <li>
                              <a href="#">Operating System</a>
                          </li>
                        <li>
                              <a href="#">Computer Networks</a>
                          </li>
                        <li>
                              <a href="#">DBMS</a>
                          </li>
                        <li>
                              <a href="#">OOPS</a>
                          </li>
                    </ul>
                </li>
                <li class="about-us">
                      <a href="#">About Us</a>
                  </li>
                <li class="contact">
                      <a href="#">Contact</a>
                  </li>
            </ul>
            <div class="navbar-search">
                <a href="#">
                      <i class="fa-solid fa-magnifying-glass"></i>
                  </a>
                <a href="#">
                      <i class="fa-solid fa-cart-shopping"></i>
                  </a>
                <a href="#">
                      <i class="fa-solid fa-user"></i>
                  </a>
            </div>
        </nav>
    </header>
</body>
  
</html>

CSS

/* style.css */
@import url(
'https://fonts.googleapis.com/css2?family=Poppins&display=swap');
  
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
  
body {
    font-family: "Poppins", sans-serif;
}
  
.logo {
    cursor: pointer;
    font-weight: bold;
    letter-spacing: 1px;
    font-size: 1.25rem;
}
  
.nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: green;
    color: #fff;
}
  
i {
    transition: transform 0.5s ease;
}
  
ul,
li,
a {
    text-decoration: none;
    list-style-type: none;
    color: #fff;
}
  
.home,
.html,
.angular,
.js,
.about-us,
.contact {
    padding: 1rem 0;
}
  
.navbar-links,
.navbar-search {
    display: flex;
    gap: 2rem;
}
  
.html,
.js,
.html-js-link {
    position: relative;
}
  
.html:hover .html-chevron,
.js:hover .js-chevron {
    transform: rotate(-180deg);
}
  
.html-js-link:hover i {
    transform: rotate(-90deg);
}
  
.html-sub-menu,
.js-sub-menu,
.html-js-sub-menu {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 3.45rem;
    left: -5%;
    background-color: hsl(120, 100%, 20%);
    width: 110%;
}
  
.html-sub-menu li,
.js-sub-menu li,
.html-js-sub-menu li {
    padding: 0.75rem;
}
  
.html:hover .html-sub-menu,
.js:hover .js-sub-menu {
    display: flex;
}
  
.html-sub-menu:hover .html-sub-menu {
    display: flex;
}
  
.html-js-sub-menu {
    top: 5rem;
    left: 9rem;
}
  
.html-sub-menu li:nth-child(3):hover .html-js-sub-menu {
    display: flex;
}
  
.html-sub-menu:hover i {
    transform: rotate(-90deg);
}

Output:

mnb'


 


Reffered: https://www.geeksforgeeks.org

Geeks Premier League

Related
How to convert Nonetype to int or string? How to convert Nonetype to int or string?
Free Consent : Meaning, Elements and FAQs Free Consent : Meaning, Elements and FAQs
Design a Google Chrome Page Template using HTML and CSS Design a Google Chrome Page Template using HTML and CSS
Creating Table Relationships in Power BI Desktop Creating Table Relationships in Power BI Desktop
Creating measures using DAX Creating measures using DAX

Type:
 Geek
Category:
 Coding
Sub Category:
 Tutorial
Uploaded by:
 Admin
Views:
 16



 

Horje