A Better Life with Steem : Learn With Steem : Making Drop Down Menu with HTML CSS
Hey guys welcome to another post of my Better life steem. Hope you guys are well I am also well by the grace of Allah. Guys Currently I am learning HTML and CSS . In the meantime I am teaching this to my two friends Sohan and Plabon. So today I will make Drop Down Menu with HTML and CSS coding. I will discuss this from the start to the end. So Let's get started.
First I set up two files on my computer. I created index.html and style.css. Then I open this Two file with NotePad++
This is two file.
Then First I setup code for HTML5. Also, I linked the CSS file to HTML. I set the title to Dropdown Menu
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Dropdown Menu</title>
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
</head>
<body>
</body>
I write this code first.
After that, I created a div and give the class name main. Then I create ul tag under that div. Also, I create 5 li tags under ul tag. And then I set a tag in all li tag. All the name I set in a -
- Sokal
- Dupur
- Bikal
- Sondha
- Rait
This is the code I used.
Now come to CSS. First I set the body's margin and padding to 0 pixel so that It didn't take any margin and padding by default. Then I set a background to the main div.
Then I called ul in css and set the list-tyle to none. Cause I don't need the style. Also I set padding and margin to 0 pixel again.
This is my css coding for body and ul and the main div.
Then I called li tag to CSS . Then I write that code -
.main ul li {
float: left;
padding: 0px 25px 0 25px;
position: relative;
}
.main ul:after {
content: "";
display:block;
clear: both;
}
First code for making all the li in one after another. Cause I don't need them as a list. Then I gave padding to them so that they have some space from each other. But that time the background of main div gone. To bring it back I use the second code. Then I run the HTML code in browser.
This is the output till now.
Then I give a hover to the li. I mean when I put the mouse pointer to the li it will changes the background.
Like this.
Then I set up another Ul tag and another 5 Li tag under the 3rd li tag. That time this new li got the float left css . But I need them as list. So I write another line of code to make them listed.
.main ul li:hover {
background:#71BA51
}
.main ul ul li {
float: none ;
background: #EB9532;
}
First code for hover in list and second code is for make the second li to list.
Then I set a background for them. Then I set their display to none. Cause I want when I hover to the list then then next ul will show. So I give them a position. Then I write some more code to set their position and hover.
.main ul ul {
position: absolute;
top: 100%;
left: 0px;
display: none;
}
.main ul li:hover>ul{
display: block;
}
This is the code for position and hover.
Then I add some more ul and li tag to add more sub menu under dropdown menu.
This is the final look of that menu.
Here is the simple video of my final result of Drop Down Menu
[Click here](https://pastebin.com/tan7pmCA) to get HTML code of my workClick here to get CSS code of my work
I shared this post on twitter
https://twitter.com/razu788/status/1315349918991572997?s=20
@razuahmed
css file e :after er kaj ta ki???
list gula j div a rakhcilam setar background color dicilam ekta.... kintu jokhon li gula re float left kori tokhon sei color ta chole jay... tai seta firai ante after use korci..
@razuahmed
Thanks for your information.I have selected you post in my top-10 digest post. You can click here to visit.
Good job bro .