ADVERTISEMENT

Create Dropdown Menu Using Only HTML and CSS ( Source Code)

Telegram Group Join Now

ADVERTISEMENT

Create Dropdown Menu Using Only HTML and CSS ( Source Code)

Welcome to the Codewithrandom blog. In this blog, we learn how to create a Dropdown Menu Using HTML and CSS. We use Html for creating the Structure of the Dropdown Menu by creating a navbar And Use Css for styling the Dropdown menu.

ADVERTISEMENT

Dropdown Menu Using Only HTML and CSS Project Preview👇

ADVERTISEMENT

Dropdown Menu Using Only HTML and CSS

 

ADVERTISEMENT

Code by N/A
Project Download Link Available Below
Language used HTML and CSS
External link / Dependencies No
Responsive Yes
Dropdown Menu Table

HTML Code For Dropdown Menu

ADVERTISEMENT

<body>
    <div id="container">
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li>
                    <a href="#">Web Design</a>
                    <ul>
                        <li><a href="#">Project</a></li>
                        <li><a href="#">Videos</a></li>
                        <li>
                            <a href="#">Tutorials</a>
                            <ul>
                                <li><a href="#">HTML/CSS</a></li>
                                <li><a href="#">Javascript</a></li>
                                <li>
                                    <a href="#">UI Trend</a>
                                    <ul>
                                        <li><a href="#">Neumorphism</a></li>
                                        <li><a href="#">Glassmorphism</a></li>
                                        <li><a href="#">Other UI</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="#">Web development</a></li>
                <li><a href="#">CWR</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </div>
    <h1>
        Go to google search codewithrandom and visit my website for source. code
        and 40+ frontend project available with complete code
    </h1>
</body>

There is all Html Code for the dropdown menu. Now, you can see output without Css, then we write CSS Code for our Dropdown Menu.

5+ HTML CSS Projects With Source Code

Only HTML Code Output

 

ADVERTISEMENT

 
Dropdown Menu Using Only HTML and CSS
Dropdown Menu Using Only HTML and CSS

Output

 

CSS Code For Dropdown Menu

@import url(https://fonts.googleapis.com/css?family=Open+Sans);
@import url(https://fonts.googleapis.com/css?family=Bree+Serif);
body {
    background: #ebf0f5;
    font-size: 22px;
    line-height: 32px;
    color: #ffffff;
    word-wrap: break-word !important;
    font-family: "Open Sans", sans-serif;
}
a {
    color: #fff;
}
#container {
    margin: 0 auto;
}
nav {
    margin: 50px 0;
    background-color: #0f131f;
}
nav ul {
    padding: 0;
    margin: 0;
    list-style: none;
    position: relative;
}
nav ul li {
    display: inline-block;
    background-color: #0f131f;
}
nav a {
    display: block;
    padding: 0 10px;
    color: #fff;
    font-size: 20px;
    line-height: 60px;
    text-decoration: none;
}
nav a:hover {
    background-color: #5f5c5c;
}
nav ul ul {
    display: none;
    position: absolute;
    top: 60px;
}
nav ul li:hover > ul {
    display: inherit;
}
nav ul ul li {
    width: 170px;
    float: none;
    display: list-item;
    position: relative;
}
nav ul ul ul li {
    position: relative;
    top: -60px;
    left: 170px;
}
h1 {
    width: 670px;
    color: black;
    font-size: 1.4rem;
}
li > a:after {
    content: " +";
}
li > a:only-child:after {
    content: "";
}

Now we have completed our Dropdown Menu project. Here is our updated output HTML + CSS.

Final Output Of Dropdown Menu Html Css

ADVERTISEMENT

 
Dropdown Menu Using Only HTML and CSS
Dropdown Menu Using Only HTML and CSS
 
Dropdown Menu Using Only HTML and CSS
Dropdown Menu Using Only HTML and CSS

10+ Javascript Projects For Beginners With Source Code

ADVERTISEMENT

Now we have completed our Dropdown Menu. Here is our updated output with Html and Css. Hope you like Dropdown Menu Project. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development.

Thank you!

In this post, we learn how to create a Dropdown Menu Using HTML and CSS. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki

Which code editor do you use for Dropdown Menu coding?

I personally recommend using VS Code Studio, it’s straightforward and easy to use.

ADVERTISEMENT

is this project responsive or not?

Yes! this is a responsive project

ADVERTISEMENT

Do you use any external links to create this project?

No!

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

Telegram Group Join Now

Share on:

Leave a Comment

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT