HTML / CSS dropdown menu

I have a sample drop down menu bar created for a website.
basically we need to add this code in the html or jsp file.
below is the example of the menu code.

<ul>
	<li>Home</li>
	<li>About</li>
	<li>Software Development
<ul>
	<li>Android</li>
	<li>Java Web Development</li>
	<li>Software Process</li>
</ul>
</li>
	<li>Blog
<ul>
	<li>News</li>
</ul>
</li>
	<li>Contact</li>
</ul>

Then we need to add a css file that defines the dropdown functionality under WEB-INF folder.
here is the code snippet below. The block of code below controls the drop-down function

ul li ul {
 padding: 0;
 position: absolute;
 top: 48px;
 left: 0;
 width: 150px;
 -webkit-box-shadow: none;
 -moz-box-shadow: none;
 box-shadow: none;
 display: none;
 opacity: 0;
 visibility: hidden;
 -webkit-transiton: opacity 0.2s;
 -moz-transition: opacity 0.2s;
 -ms-transition: opacity 0.2s;
 -o-transition: opacity 0.2s;
 -transition: opacity 0.2s;
}
ul li ul li {
 background: #555;
 display: block;
 color: #fff;
 text-shadow: 0 -1px 0 #000;
}

anyway here’s the original sample of this menu bar.
http://cssdeck.com/labs/another-simple-css3-dropdown-menu

See my version here in the screenshot below.

 

dropdown_menu

 

Update: Try www.corelangs.com . They have tutorials on CSS , HTML and JavaScript. They provide diagrams on the concepts behind the technology, sample codes and some tips on Website programing.

Advertisements

2 thoughts on “HTML / CSS dropdown menu

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