Animated Drop Down Menu With CSS3 (and no JavaScript)

front-end fu

Some thing quick, simple and fun this time.   A drop down menu, built solely with HTML and CSS, that is functional back to IE7, and animated for browsers that support CSS3 transitions. See the end-product, here.  Let’s get going…

First, the HTML structure.

A menu tag to provide semantic context, with a top-level unordered list to provide structure for the top level of the menu, and nested unordered lists to provide structure for the drop-down (or sub) menus.

Now, let’s do the layout with some basic CSS.

Here we eliminate the default margins and padding, and bullets, for the unordered lists that make up our menu.  Then we float the list items for the top level menu to the left.  We also set a width for the menu, and divide this width equally (25%) among the four sub-menus. At this point we should have the items lining up correctly, with top…

View original post 517 more words

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 )

Google photo

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

Connecting to %s