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
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=
<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(
*, *::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: