FREE ASSISTANCE FOR THE INQUISITIVE PEOPLE
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
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 <i class="fa fa-caret-down"></i></a>
<ul>
<li><a href="#">Articles 1</a></li>
<li><a href="#">Articles 2</a></li>
<li><a href="#">Articles 3 <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>
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;
}
/****** 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;
}
