Drop-Down Menu Using HTML and CSS Code

Create Drop-Down Menu Using HTML and CSS Code

Create Drop-Down Menu Using HTML and CSS Code

Create Drop-Down Menu Using HTML and CSS Code
Drop-Down Menu Using HTML and CSS Code

 

Heyy Learners, Today we are going to develop an amazing Drop-down Menu. So now you are thinking what is amazing about the menu? So this Menu is not so simple it has drop-down menu lists when you hover over the menu.

You can see it down in the Live server.

50+ HTML, CSS & JavaScript Projects With Source Code

Live Preview Of Drop-Down Menu Using HTML and CSS

The live server of the drop-down menu is below:-

HTML Code(Layout Of Drop-down menu):-

So we are going to create only the nav bar so I used a semantic tag Header and inside it the nav Inside the nav two divs one for the logo and menu. Insidse it I have used four divs as menuitems for HOME, WORK, ABOUT, and  CONTACT US.

Restaurant Website Using HTML and CSS

We are inserting two divs inside it namely Devlopement and design and inside the dev, we have inserted two divs for web and app inserted ion-icon (an icon package) and linked the css with it.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://unpkg.com/[email protected]/dist/css/ionicons.min.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <header>
        <nav>
            <div class="logo"><a href="">LOGO</a></div>
            <div class="menu">
                <div class="menuitem"><a href="">HOME</a></div>
                <div class="menuitem"><a href="">ABOUT US</a></div>
                <div class="menuitem work"><a href="">WORK</a><ion-icon name="arrow-dropdown"></ion-icon>
                   <div class="workitem">
                   <div class="dev item"><a href="">DEVELPEMENT</a><ion-icon name="arrow-dropright"></ion-icon>
                <div class="devitem">
                    <div class="web item"><a href="">WEB</a></div>
                    <div class="app item"><a href="">APP</a></div>
                </div></div>
                    <div class="design item"><a href="">DESIGNING</a></div>
                   </div>
                </div>
                <div class="menuitem"><a href="">CONTACT US</a></div>
            </div>
        </nav>
    </header>
    <script src="https://unpkg.com/[email protected]/dist/ionicons.js"></script>
    
</body>

</html>

CSS Code(Styling The Drop-down Menu):- 

After creating the basic layout of the website now it’s time to style it and make it beautiful and a working webpage.

10+ HTML CSS Projects For Beginners with Source Code

I have used simple styling methods like flexbox and some basics of css.

*{
    margin: 0;
    padding: 0;
}
nav{
    display:flex;
    justify-content:space-evenly;
    width:100vw;
    background-color: green;
    
}
.logo{
    padding: 20px;
}
.menu{
    display:flex;
}
a{
    text-decoration:none;
    color:white;
}
.workitem{
    display: none;
}

.devitem{
    display: none;
}
.menuitem{
    padding: 20px;
}
.menuitem:hover{
    background-color: rgb(43, 82, 5);
}
.work{
    position:relative;
    
}
.work:hover .workitem{
    padding-top:10px;
display: flex;
position:absolute;
flex-direction: column;
left:0;

}
.dev:hover .devitem{
    display: flex;
    position:absolute;
    flex-direction: column;
    left:100%;
   top:0px;
   
}
.item:hover{
    background-color: rgb(11, 78, 2);
   
}

.dev:hover{
    position:relative;
}
.item{
    background-color: green;
    height:30px;
    padding:12px;
    width:100px;
    border-width:1px 0px;
    border-color:white;
    border-style:dotted;
    display: flex;
}
ion-icon{
    color:white;
}

I hope you liked it Wait, Did you still not implement it So why are you waiting, go and implement it now.

Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)

If you faced any difficulty feel free to comment on your problems and If you really liked it, please show your love in the comment section this really motivates a blogger to provide more such content.

Written by @Himanshu Singh.



Tags: ,

Leave a Reply