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.

	<li>Software Development
	<li>Java Web Development</li>
	<li>Software Process</li>

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.

See my version here in the screenshot below.




Update: Try . 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.

2 thoughts on “HTML / CSS dropdown menu

Leave a Reply

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

You are commenting using your 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