One.Man.Vision

This is featured post 1 title

To set your featured posts, please go to your theme options page in wp-admin. You can also disable featured posts slideshow if you don't wish to display them.

This is featured post 2 title

To set your featured posts, please go to your theme options page in wp-admin. You can also disable featured posts slideshow if you don't wish to display them.

This is featured post 3 title

To set your featured posts, please go to your theme options page in wp-admin. You can also disable featured posts slideshow if you don't wish to display them.

This is featured post 4 title

To set your featured posts, please go to your theme options page in wp-admin. You can also disable featured posts slideshow if you don't wish to display them.

This is featured post 5 title

To set your featured posts, please go to your theme options page in wp-admin. You can also disable featured posts slideshow if you don't wish to display them.

CSS Drop Down Menu

Posted by Haroon Bashir on June 16th, 2009

After playing with some javascript menus today, I decided to see if I could pull off a drop down menu without any javascript. I’ve seen it done before, so I thought I’d give it a shot. It actually ended up being pretty simple, so I thought I’d share the how-to.

I uploaded a demo of what I mean. If you take a look at the source, the basic elements of the menu are ul and li tags.

The first thing to do is differentiate the parent menu items from the menu items that only appear after you hover over the parent item. I did this with classes.

<div id="menu"> <ul id="item1"> <li>menu item</li> <li><a href="#">menu item 1</a></li> <li><a href="#">menu item 2</a></li> <li><a href="#">menu item 3</a></li> </ul> </div>

You’ll see the parent item is marked with top, while the rest are marked item. Now I can get to hiding .item and letting .top continue to show. So I’ll add this to the style sheet.