×
FREE ASSISTANCE FOR THE INQUISITIVE PEOPLE
Tutorial Topics
X
softetechnologies
Transparent Navbar II Create a navbar by CSS & HTML Responsive Image Gallery
Dropdown Navbar using CSS and HTML - CSS 3.0
2160    Arnab De    14/05/2017

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>

softetechnologies

<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;
}

softetechnologies

/****** 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

Transparent Navbar II Create a navbar by CSS & HTML Responsive Image Gallery
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.
Enter New Comment
Comment History
No Comment Found Yet.
Rabindranath Tagore
Don't limit a child to your own learning, for he was born in another time.
Rabindranath Tagore
2575
34.21
Today So Far
Total View (Lakh)
softetechnologies
01/01/2018     33611
28/06/2017     29530
02/08/2017     27024
26/05/2018     26987
15/05/2017     23239
06/07/2017     21773
01/08/2017     21320
25/06/2018     20129
21/04/2018     18620
14/07/2017     16470
softetechnologies