Dropdown Navbar using CSS and HTML
14-05-2017    362 times
Dropdown Navbar

Dropdown Menu Creation

Today we are learning about the creation of a dropdown nav bar or menu bar in a web page. At first we create a multilevel menu using <ul> tag in html. After then design the list using the CSS. In ccs we write the code in two steps

  1. Design for top level menu
  2. Design for sub menu

Html Code

<html>
<head>
<title>CSS Dropdown NavBar</title>
<link rel="stylesheet" type="text/css" href="dropdown.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome.css">
<nav class="navbar">
<ul>
<li class="active"><a href="#"><i class="fa fa-home"></i></a></li>
<li><a href="#">Product</a></li>
<li><a href="#">Articles &nbsp;<i class="fa fa-caret-down"></i></a>
<ul>

Tutorial at home

<li><a href="#">Articles 1</a></li>
<li><a href="#">Articles 2</a></li>
<li><a href="#">Articles 3 &nbsp;&nbsp;<i class="fa fa-caret-right"></i></a>
<ul>
<li><a href="#">Articles 3-1</a></li>
<li><a href="#">Articles 3-2<i class="fa fa-caret-right"></i></a>
<ul>
<li><a href="#">Articles I</a></li>
<li><a href="#">Articles II</a></li>
</ul>
</li>
<li><a href="#">Articles 3-3</a></li>
<li><a href="#">Articles 3-4</a></li>
<li><a href="#">Articles 3-5</a></li>
</ul>
</li>
<li><a href="#">Articles 4</a></li>
<li><a href="#">Articles 5</a></li>
</ul>
</li>
<li><a href="#">Notes</a></li>
<li><a href="#">Info</a></li>
<li><a href="#">Search</a></li>
</ul>
</nav>
</head>
</body>
</html>

Dropdown Navbar
Dropdown Navbar

Css Code

@charset "utf-8";

/**** main nav bar ****/

.navbar
{
margin-top:25px;
background-color:#ff9933;
height:47px;
}

.navbar ul
{
list-style:none;
}
.navbar ul li a
{
display:inline-block;
color:#fff;
text-decoration:none;
font-weight:bold;
font-size:20px;
padding:2px 25px;
}
.navbar ul li
{
position:relative;
float:left;
margin:0;
padding:9.5px;
}
.navbar ul li.active
{
background-color:#993300;
padding-top:2px;
padding-bottom:2px;
}
.navbar ul li.active i
{
font-size:39;
}
.navbar ul li:hover
{
background-color:#993300;
}
.navbar ul li:hover a
{
color:#ffff33;
}

Tutorial at home

/****** SUB MENU ****/

.navbar ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background-color:#ff9933;
padding:0;
width:100%;
}
.navbar ul ul li
{
float:none;
}
.navbar ul ul li a
{
padding:10px 15px;
}
.navbar ul ul ul
{
top:0;
left:100%;
width:100%;
}
.navbar ul li:hover > ul
{
display:block;
}

Video Tutorials

softetechnologies
    Author Details
Arnab De
I have over 16 years of experience working as an IT professional, ranging from teaching at my own institute to being a computer faculty at different leading institute across Kolkata. I also work as a web developer and designer, having worked for renowned companies and brand. Through tutorialathome, I wish to share my years of knowledge with the readers.
    Related Post
  Query About the post