Drop Down NavBars

Nowadays most navigation on websites are uniform. What I mean by that is that you can get to most pages  you wanna get to on that website from the page you’re on. One way to do that is to utilize drop down navbars. To make a drop down navbar you first need to know how to make lists and beyond that nested lists. You can learn that here https://digicompdiy.wordpress.com/2011/11/07/nested-lists/

That’s the only html you need to know for this process. Once you understand that you’re going to want to go to you CSS stylesheet. At this point you should have a nested list that looks something like this.

This is a nested list

This is what your nested list should look like.

Now all that you have to do is add a couple lines of code in CSS and then you’re done. This is what your code should look like.


This is the CSS that you have to ass

This is the code that you need to add to make your bar drop down properly,

I just added this so that you can copy the code and paste it right into your CSS.

#navbar {
	margin: 0;
	padding: 0;
	height: 1em; }
#navbar li {
	list-style: none;
	float: left; }
#navbar li a {
	display: block;
	padding: 3px 8px;
	background-color: #0E6775;
	color: #fff;
	text-decoration: none;
#navbar li ul {
	display: none; 
	width: 10em; /* Width to help Opera out */
	background-color: #0E6775;}	
#navbar li:hover ul {
	display: block;
	position: absolute;
	margin: 0;
	padding: 0; }
#navbar li:hover li {
	float: none; }
#navbar li:hover li a {
	background-color: #0E6775;
	border-bottom: 1px solid #fff;
	color: #000; }
#navbar li li a:hover {
	background-color: #0E6775; }

A couple things to note. The # symbol next to your the word navbar is a reference to my id which is called navbar. If you have your navbar called something else you have to change it to be whatever you’ve titled it be. Otherwise it will not change to look right. In the end your navbar should look something like this.


This is what my navbar looks like.

Your navbar should look something like this.





~ by collier3773 on November 13, 2011.

%d bloggers like this: