Pure CSS Dropdown Menu With Submenu

Pure CSS Dropdown Menu With Submenu

Want to create a dropdown menu with only HTML & CSS? Solution: Pure CSS Dropdown Menu With Submenu,Simple HTML CSS Menu with Multi Submenu.

I am sure that you know what is a dropdown menu, A dropdown menu is a list of links or items that appear whenever the button is clicked or hovered on. Every website use dropdown menu, this the best way to organize listing by category.

Today you will learn to create a drop-down menu using only HTML & CSS. This post is very useful if you are learning HTML CSS, I mean if you are a beginner in web design or development. You can use this on your next or current program after some modification. I am sure you will definitely able to create a pure CSS menu after seeing this post.

Pure CSS Dropdown Menu With Submenu Source Code

As always before sharing source code, let’s talk about it. As you can see in preview this is a simple dropdown menu with pure CSS, if you want a responsive one then check out this Responsive Navbar. I have created HTML list with <ul> and <li> for creating this menu, I have multi-time used these tags to create submenus.

For creating the icons which are after every dropdown list, I have used CSS Unicode icons (see list). In this menu, all works are done by CSS :hover property. First I place all list in their position using postion: property. At first, I just hide all the submenus and dropdown listing, they all will visible on the mouse hover.

There is nothing to explain all are these very easy to understand, you will understand easily after getting the codes. For creating this drop-down menu you have to create only 2 files, One for HTML, & one for CSS. Follow these steps to creating this without any error.

index.html

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

<!DOCTYPE html>
<!-- code by webdevtrick ( https://webdevtrick.com ) -->
<html>
 
<head>
  <meta charset="UTF-8">
  <title>Pure CSS DropDown Menu</title>
  <link href="https://fonts.googleapis.com/css?family=Quicksand|Russo+One&display=swap" rel="stylesheet">
      <link rel="stylesheet" href="style.css">
</head>
<body> 
<div id="container">
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Web Design</a>
            <ul>
                <li><a href="#">HTML</a></li>
                <li><a href="#">CSS</a></li>
                <li><a href="#">JavaScript</a></li>
            </ul>        
            </li>
            <li><a href="#">Web Development</a>
 
        <ul>
                <li><a href="#">PHP</a></li>
                <li><a href="#">Node JS</a></li>
                <li><a href="#">Advance JS</a>
 
        <ul>
                    <li><a href="#">Angular</a></li>
                    <li><a href="#">VUE</a></li>
                    <li><a href="#">React</a>

                        <ul>                             <li><a href="#">React Native</a></li>                             <li><a href="#">React JS</a></li>                             <li><a href="#">Material Design</a></li>                         </ul>                     </li>                 </ul>                 </li>             </ul>             </li>             <li><a href="#">Graphic Design</a> <ul>                 <li><a href="#">Photoshop</a></li>                 <li><a href="#">Illustrator</a></li>                 <li><a href="#">Adobe XD</a></li>             </ul>   </li>             <li><a href="#">Contact</a></li>             <li><a href="#">About</a></li>         </ul>     </nav>   <h1>Simple <span>CSS</span> DropDown Menu</h1>   </div>   </body> </html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes.

/** code by webdevtrick ( https://webdevtrick.com ) **/
body {
    background: #212121;
    font-size:22px;
    line-height: 32px;
    color: #ffffff;
    word-wrap:break-word !important;
    font-family: 'Quicksand', sans-serif;
    margin: 0;
    padding: 0;
}
h1 {
    font-size: 60px;
    text-align: center;
    color: #FFF;
    margin-top: 150px;
    font-family: 'Russo One', sans-serif;
    }
h1 span {
    color: #FF4649;
}
#container {
    margin: 0 auto;
}
 
nav {
    margin: 35px 0;
    background-color: #FF4649;
}
nav ul {
    padding: 0;
        margin: 0;
    list-style: none;
    position: relative;
    }
nav ul li { display:inline-block; background-color: #FF4649; } nav a { display:block; padding:0 10px;
color:#FFF; font-size:20px; line-height: 60px; text-decoration:none; } nav a:hover { background-color: #333; } nav ul ul { display: none; position: absolute; top: 60px;
} nav ul li:hover > ul { display:inherit; }
nav ul ul li { width:230px; float:none; display:list-item; position: relative; } nav ul ul ul li { position: relative; top:-60px; left:230px; } nav ul ul li { border: 1px solid white; }
li > a:after { content:  ' ▼'; } li > a:only-child:after { content: ''; }

That’s It. Now you have successfully created a Pure CSS Dropdown Menu With Submenu. In other words, Simple HTML CSS Menu with Drop Down Listing.


Thanks for reading! If you liked this post, share it with all of your programming buddies!

Further reading.

☞ Svelte.js - The Complete Guide

☞ The Complete JavaScript Course 2019: Build Real Projects!

☞ Advanced CSS and Sass: Flexbox, Grid, Animations and More!

☞ CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

☞ CSS Bootcamp - Master CSS (Including CSS Grid / Flexbox)

☞ Build Responsive Real World Websites with HTML5 and CSS3

☞ Become a JavaScript developer - Learn (React, Node,Angular)

☞ JavaScript: Understanding the Weird Parts

☞ Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)

☞ The Full JavaScript & ES6 Tutorial - (including ES7 & React)

☞ JavaScript - Step By Step Guide For Beginners


Originally published on https://webdevtrick.com

css css3 html5 html

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

HTML5 and CSS3 Fundamentals - Learn HTML5 and CSS3 From Scratch

HTML5 and CSS3 Fundamentals - Learn HTML5 and CSS3 From Scratch, you'll learn the fundamentals of HTML5 & CSS3 programming. Tune in to learn concepts about web pages, CSS3 styles and HTML5 features.

Colorful Drop-Down Menu in HTML CSS | Drop-Down Menu in HTML CSS

Download File: https://drive.google.com/file/d/1PpbVEw_mSvUPfA0WqdgcKWSoc-VnqgqW/view?usp=sharing Want to create a Drop-Down Menu with HTML & CSS? Check out ...

HTML 5 Tutorial: How to create a table using HTML tags and Stylesheet (CSS)

In this article, we want to show you how to create a table using HTML tags and Stylesheet (CSS). HTML table may vary depends on data and style requirements. Sometimes, in the real application, we use an HTML table as a layout of the Email template in HTML format.

Responsive Our Services Section Using HTML & CSS | Our Services HTML Code

Download The File: https://drive.google.com/file/d/1x_w4dd9o5TeVur2zuWHVwtsdtyZ5aWv2/view?usp=sharing Other PlayList: There is a complete playlist of JavaScr...