Drop Down by using HTML and CSS


Today I worked how to create navigation bar and Drop down (with

submenu) using CSS . It was easy and nice .

First HTML script is


<html>
<head>
<link rel = "stylesheet" type = "text/css" href = "reset.css" />
<link rel = "stylesheet" type = "text/css" href = "trial.css" />
</head>
<body>
 <div id  = "container">
 <ul id = "navbar">
 <li id = "li_about_us"><a href = "#">About Us</a>
 <ul id = "submenu_navbar_1">
 <li id = "li_what_we_do"><a href = "#">What We Do</a></li>
 <li id = "li_management"><a href = "#">Management</li>
 <li id = "li_contact_us"><a href = "#">Contact Us</li>
 </ul>
 </li>
 <li id = "li_solution" ><a href = "#">Solution</a></li>
 <li id = "li_news" ><a href = "#">News</a></li>
 <li id = "li_careers" ><a href = "#">Careers</a></li>
 </ul>
 </div>
</body>
</html>

HTML consits of main menu ul and submenu ul .

Links will look as below without CSS .

By adding css .


#navbar{
 float: left;
 width: 100%
}
#navbar li{
 float: left;
 list-style-type:none;
}
#submenu_navbar_1 li {
 display:inline;
 float:left;
 list-style-type:none;
}

#navbar li a{
 display: block;
 width: 150px;
 background: #CCCCCC;
text-decoration:none;
}
#navbar li ul{
 position: absolute;
 left: -9999px;
 width: 150px;
list-style-type:none;
}

#navbar li:hover ul{
 left: auto;
}

#navbar li:hover a{
 background:#333333;
}

#navbar li:hover ul li a{
 color:white;
}

Now same link will look like that

Explanation :

#navbar li ul{
 position: absolute;
 left: -9999px;
 width: 150px;
list-style-type:none;
}

At this stage submenu will not be there . Instead of giving display:none; , I have given

left:-9999px;

#navbar li:hover ul{
 left: auto;
}

At this stage , due to left:auto; sub-menu come back to its original postion

Advertisements

About sathia

Web developer at cloudmint
This entry was posted in Uncategorized. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s