Dropdown Navbar with Html and Css

Rakib Alom -
4

Now we make a Dropdown Navbar in Website with Html and Css. First you create a html file which name is 'index.html'
, then open your file with your editor and type this html code -


 <!DOCTYPE html>
<html>
<head>
<title>New Navbar Two</title>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
<div id="menu">
<ul>
<li><a href="">Home</a></li>
<li><a href="">Country</a>
<ul>
<li><a href="">Bangladesh</a></li>
<li><a href="">England</a></li>
<li><a href="">America</a></li>
<li><a href="">Newzeland</a></li>
</ul>
</li>
<li><a href="">News</a>
<ul>
<li><a href="">National</a></li>
<li><a href="">Media</a></li>
<li><a href="">Sports</a>
<ul>
<li><a href="">Criket</a></li>
<li><a href="">Football</a></li>
</ul>
</li>
<li><a href="">International</a></li>
</ul>
</li>
<li><a href="">Library</a>
<ul>
<li><a href="">Story</a>
<ul>
<li><a href="">Love Story</a></li>
<li><a href="">Romantic Story</a></li>
<li><a href="">Sci-fi Story</a></li>
</ul>
</li>
<li><a href="">Audio</a></li>
<li><a href="">Video</a></li>
<li><a href="">Book</a></li>
</ul>
</li>
<li><a href="">More</a>
<ul>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>
<li><a href="">Log out</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>

 Now you also create a css file which name is 'style.css' and open with your editor. Then type css code-

 *{
margin:0;
padding:0;
}
#menu{
height:45px;
}
#menu ul{
list-style-type:none;
}
#menu ul li{
height:45px;
width:120px;
line-height:45px;
border-left: 1px solid #ccc;
border-bottom: 1px solid #ccc;
float:left;
border-radius: 2px;
text-align:center;
font-weight:bold;
background-color:black;
position:relative;

}
#menu ul li a{
text-decoration:none;
color:white;
display:block;
}
#menu ul li a:hover{
color:#000;
background-color:red;
display:block;

}
#menu ul ul{
position:absolute;
display:none;
}
#menu ul ul ul{
margin-left:120px;
top:0;
}
#menu ul li:hover > ul{
display:block;
}

 Tutor: Rakib Alom
Tags:

4 Comments

Previous Post Next Post