×
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
2678    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.
Swami Vivekananda
If the poor cannot come to education, education must reach them, at the plough, in the bakery factor
Swami Vivekananda
262
44.94
Today So Far
Total View (Lakh)
softetechnologies
26/05/2018     36733
01/01/2018     34923
28/06/2017     32404
02/08/2017     30469
25/06/2018     30216
15/05/2017     25401
01/08/2017     24701
06/07/2017     24612
14/07/2017     20225
21/04/2018     19839
softetechnologies