×
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
2838    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.
Nelson Mandela
Education is the most powerful weapon which you can use to change the world.
Nelson Mandela
590
49.96
Today So Far
Total View (Lakh)
softetechnologies
26/05/2018     41001
01/01/2018     35638
28/06/2017     33618
25/06/2018     32592
02/08/2017     31869
06/07/2017     26486
01/08/2017     26403
15/05/2017     26074
14/07/2017     21384
21/04/2018     20395
softetechnologies