Within web design there are a multitude of solutions and techniques that cover the same problem. No solution is entirely correct, and none are entirely wrong. That is the beauty, and sometimes the agony, of web design.

Sometimes you just want the most basic and simplest technique to solve a popular problem, and that is what today’s Design Reviver Answers question covers: How do you create a nice drop down menu effect?

You can leave a comment below or you can leave your solution on the original posted question on Answers.

How do you create a nice drop down menu effect?

This question was originally asked by Elisabett Monroy, and you will find the favorite (as voted by Answers users) solution below:

Answer from Rubacode:

…and here is the code for the menu:

Now the CSS for Styling:

ul.topnav {
    list-style: None;
    padding: 0 20px;
    margin: 0;
    float: Left;
    width: 920px;
    background: #222;
    font-size: 1.2em;
    background: Url(topnav_bg.gif) repeat-x;
}
ul.topnav li {
    float: Left;
    margin: 0;
    padding: 0 15px 0 0;
    position: Relative; /*--Declare X and Y axis base for sub navigation--*/
}
ul.topnav li a{
    padding: 10px 5px;
    color: #fff;
    display: Block;
    text-decoration: None;
    float: Left;
}
ul.topnav li a:hover{
    background: Url(topnav_hover.gif) no-repeat center top;
}
ul.topnav li span { /*--Drop down trigger styles--*/
    width: 17px;
    height: 35px;
    float: Left;
    background: Url(subnav_btn.gif) no-repeat center top;
}
ul.topnav li span.subhover {background-position: Center bottom; cursor: Pointer;} /*--Hover effect for trigger--*/
ul.topnav li ul.subnav {
    list-style: None;
    position: Absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
    left: 0; top: 35px;
    background: #333;
    margin: 0; padding: 0;
    display: None;
    float: Left;
    width: 170px;
    border: 1px solid #111;
}
ul.topnav li ul.subnav li{
    margin: 0; padding: 0;
    border-top: 1px solid #252525; /*--Create bevel effect--*/
    border-bottom: 1px solid #444; /*--Create bevel effect--*/
    clear: Both;
    width: 170px;
}
html ul.topnav li ul.subnav li a {
    float: Left;
    width: 145px;
    background: #333 url(dropdown_linkbg.gif) no-repeat 10px center;
    padding-left: 20px;
}
html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/
    background: #222 url(dropdown_linkbg.gif) no-repeat 10px center;
}

And a little bit of jQuery:

$(document).ready(function(){

    $("ul.subnav").parent().append(""); //Only shows drop down trigger when js is enabled (Adds empty span tag after ul.subnav*)

    $("ul.topnav li span").click(function() { //When trigger is clicked...

        //Following events are applied to the subnav itself (moving subnav up and down)
        $(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click

        $(this).parent().hover(function() {
        }, function(){
            $(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
        });

        //Following events are applied to the trigger (Hover events for the trigger)
        }).hover(function() {
            $(this).addClass("subhover"); //On hover over, add class "subhover"
        }, function(){    //On Hover Out
            $(this).removeClass("subhover"); //On hover out, remove class "subhover"
    });

});

This solution is pretty straight forward and very easy to implement, do you have a better solution? We would love to hear about it.

You can leave your solution below in the comment section, or you can leave an answer/solution here: How do I create a nice drop down menu effect? on Answers.

Unanswered Answers

Can you help with this weeks unanswered questions?

1. Is it possible to Change the Google Maps API Key Dynamically Using JavaScript?
2. Need to get the XML content of a node as a string?
3. What Do I Need to Parse Content With Regular Expressions Using jQuery?
4. How Can I Convert HTML Entities to Unicode Character In JavaScript?
5. What's a Good Way to Refresh/Load a Web Page for Every 10 Seconds to View Updated Information?
6. Does Anyone Know of Any Browsers that May Have Problems Caching XMLHTTPRequest Responses?
7. How Can I Get a Div to Automatically Adjust to the Size of the Background I Set for it Without Setting a Specific Height for it?
8. What's a Good Way to Test Connectivity in PHP?
9. How Can I Keep a Centered Background Image from Breaking the Layout If the Browser Window is Resized?
10. What File Permissions Should Be Set for Uploaded Files?

Thanks again, firstly to everyone who asked a question, but most importantly thanks to everyone that took the time to offer always helpful and useful answers.

You could have the best website in the world with the best content ever, yet without a decent navigation system it would all be worthless. There are certain criteria you need to follow when designing your menu – it needs to only stands out and be obvious of its purpose, it also needs to match the style of your sites design and most importantly it needs to be usable, meaning your visitors can understand it and easily use it.

For today’s news we showcase the best in web design navigation and menus for your inspiration.

40 Creative Navigation Menus

In this article from ProBlogDesign they have pulled together some of the best designed navigation bars (both horizontal and vertical) to help give you some ideas to enhance your own navigation.

40 Creative Navigation Menus

25 Mega Menus for Your Design Inspiration

Mega menus are a current popular web design trend that take drop down menus a bigger step forward in an attempt to make it easier for visitors to navigate through a larger site.

25 Mega Menus for Your Design Inspiration

A Showcase of Website Navigations with Serious Click Appeal

In this article you will find a showcase of websites that successfully achieve "Navigations with Serious Click Appeal" in a very stylish way.

A Showcase of Website Navigations with Serious Click Appeal

CSS Menu Samples

With over 100+ menus on display in this showcase, in every possible conceivable format (CSS, Javascript, Flash…), in almost every possible style (vertical, horizontal…), you are practically guaranteed to find inspiration.

CSS Menu Samples

CSS is a very important element of what we call a “structurally sound” web design. CSS turns strips of code and interactive features into a working design. This is especially true for CSS based menus. Giving your users a creative way to interact with pages, categories, and other aspects of your site is a great way to keep them coming back. Not only that, but your navigation will be easily accessible since it will stand-out. Your users won’t get lost, they’ll always know how to get to where they need.

If you want to find out the different CSS features you can incorporate into your navigation, it’s important that you view other menus as inspiration, and you know how they work. Below we’ve hand-selected 30 Best CSS Techniques for a Unique Navigation that are sure to bring creativity to your menu.

Advanced CSS Menu

An in-depth, creative navigation tutorial.

Create Vimeo-Like Top Navigation

A top navigation tutorial on virtually the same menu as Vimeo.com; structure wise. When you hover over the search box, a drop down menu appears and it gives you a few customizable options.

Overlapping Menu

With this tutorial you’re able to create a menu that overlaps. It’s a pretty nice effect for a unique site.

Centered Tabs with CSS

If you’re looking for an alternative to the sliding doors method, then this centered tab css tutorial is just what you need. It fully centers the tab in you navigation menu, and eliminates those left or right aligned mishaps.

Scalable CSS Based Breadcrumbs

With this navigation technique the usability of your menu can increase. The code is simple and it only uses 6 CSS styles.

CSS Drop-Down Menu Framework

This menu seperates HTML from CSS, and categorizes CSS types. You can create a nice drop-down effect.

Turning a list into a navigation bar

Turn your menu list into a navigation bar with a background image structured through CSS.

Advanced CSS Menu Trick

You can shift the focus of the user’s attention to the menu items you’re not hovering over. It creates a nice blur effect.

JavaScript Dropdown Menu with Multi Levels

This multi-level drop-down menu allows you to define several different sub navigations.

Hidden Tab Menus

This is a simple hidden tab menu that onfolds when you hover over the menu icon.

Inverted Sliding Doors Tabs

Here you’ll find a creative sliding doors technique that lets you work with inverted tabs. Inverted tabs means that the bottom tab of the one you would currently be onis lower and is left or right aligned.

Son of Suckerfish Dropdowns

This is a easy to install and completely accessable dropdown navigation menu. Your menu can also have multiple-levels as well.

MenuMatic: Vertical Menu Example

MenuMatic is a MooTools class that takes a sematic ordered or unordered list of links and turns it into a dynamic drop down menu system.

Circular Menu with Sub-Menus

Nice tutorial for a circular menu that lets you add a sub menu level of smaller icons. It adds a smooth effect to the navigation process.

Sexy Drop Down Menu with jQuery and CSS

With this tutorial you’ll learn how to create a “sexy” drop down menu that will use CSS and jQuery to create a drop down effect.

CSS Sprite Navigation Tutorial : Ehousestudio

This tutorial will help you build a succesful CSS navigation using sprite images. You’ll be able to enhance the load time of your menu as well.

Rounded corner CSS navigation bar with jQuery

You’ll learn how to add some nice round corner effect to your anchor elements with jQuery, for your navigation, without using any image.

Designing the Digg Header

This menu contains a fluid width, and enables you to develop a smooth drop-down effect where you can place emphasis on important sub-menus.

Mac Style Dock Menu Navigation Bar in CSS

This more for those Mac fanatics or if you have an Apple themed site and wish to enhance the look of your site by implementing a menu that fits your overall design.

The Menu menu

This a great CSS menu that “comes to life” after hovering over a menu item, this automatically reveals a sub-menu.

CSS Navigation with Glowing Icons

Here you’ll find a beautiful CSS menu technique for creating glowing icons.

Woody CSS Menu

Woody is a CSS menu that’s simply ready to use and has been tested on several browsers such as Internet Explorer and Firefox.

CSS Block Navigation Menu

This CSS menu technique allows you to develop a navigation menu that has item with descriptions.

CSS Hover Button

Create CSS button-style navigation menu by checking out this excellent tutorial.

Matte CSS Menu

Matte is a simple CSS menu with rounded corners using two small images only from 13styles.

Fancy Sliding Tab Menu

Beautiful navigation technique that brings down the menu you’re currently on by hovering over the next one.

Aplus ADxMenu

This technique is a pretty basic example of an organized and well designed menu tabs.

DOMTab

DOMtab is a JavaScript that turns a list of links connected to content sections into a tab interface.

Drop Down Menu with Nested Submenus

Create your own drop down menu with nested sub-menus using CSS and a bit of JavaScript.

Nicely Organized Tabed Menu

Example 4 of these menus is a simple, well organized menu that would better fit a solid color layout.

Dropdown menus and menu bars have been heavily used since the early days of graphical user interfaces. Their use has become ubiquitous, and even expected, in desktop applications, and the web has quickly followed suit. This article is intended to describe an extremely basic, yet extremely powerful, technique for adding dropdown menus in your application user interface or website design.

The Finished Product

Getting Started

To begin, we need to define our basic menu hierarchy. In order to maintain a structured and semantic approach to this, we will use nothing more than unordered lists of standard links. We’ll use the following code as an example:

<ul id="cssdropdown">
<li class="headlink">
	<a href="mine.html?search_engines">Search Engines</a>
	 <ul>
	  <li><a href="http://google.com/">Google</a></li>
	  <li><a href="http://yahoo.com/">Yahoo</a></li>
	  <li><a href="http://live.com/">Live Search</a></li>
	 </ul>
	 </li>
	  <li class="headlink">
	  <a href="mine.html?shopping">Shopping</a>
         <ul>
	  <li><a href="http://amazon.com/">Amazon</a></li>
	  <li><a href="http://ebay.com/">eBay</a></li>
	  <li><a href="http://craigslist.com/">CraigsList</a></li>
	 </ul>
 </li>
</ul>

You should see something like this:

Creating Dropdown Lists

With our semantic HTML and link structure written out, we can proceed to apply some basic hover techniques that are included in CSS. The :hover pseudo-class is invoked when the mouse is placed over the list item.

We can use CSS to hide the child unordered lists by default, and show them with the :hover pseudo-class, like so:

       li.headlink ul { display: none; }
       li.headlink:hover ul { display: block; }

It is best to take this opportunity to apply some basic styling to the list, such as floating the parent unordered lists in a row, and specifying the width of the unordered list to ensure that no shifting occurs when the elements are hidden or shown. This should look something like this:

The Issue with Internet Explorer

Unfortunately, while the :hover pseudo-class may be elegant, it does not work in Internet Explorer. At this point, a short bit of JavaScript is required to provide a clean fix. All we need to do is select all unordered lists that are within a list item that has the class .headlink and add onmouseover and onmouseout events to them. This can be done in twelve simple lines of code:

	window.onload = function()
	{
		var lis = document.getElementsByTagName('li');
		for(i = 0; i < lis.length; i++)
		{
			var li = lis[i];
			if (li.className == 'headlink')
			{
				li.onmouseover = function() { this.getElementsByTagName('ul').item(0).style.display = 'block'; }
				li.onmouseout = function() { this.getElementsByTagName('ul').item(0).style.display = 'none'; }
			}
		}
	}
	

Those using jQuery are privileged to an even easier solution:

	$(document).ready(function(){
		$('li.headlink').hover(
			function() { $('ul', this).css('display', 'block'); },
			function() { $('ul', this).css('display', 'none'); });
	});
	

Putting It All Together

The dropdown menu is now functional in the major browsers, and is ready to be styled, cleaned up, and shipped.

It is advantageous to start by applying a basic style that's a little more appealing than the standard lists. This allows us to visualize how this will fit into our application or design.

Adding Some Flare

With a few extra lines of CSS, the menu is styled and ready to fit into our site.

Wrapping Up

One important aspect of writing a generic dropdown list is to segregate the CSS and JavaScript to ensure that there are no conflicts. The easiest way to do this is to add the #cssdropdown selector in front of every element.

Finally, we check to see if the #cssdropdown div can be moved around freely. This ensures that dropdown menu we have created will flow nicely when integrated with our existing site design or application user interface.

The full code and example remains both basic and concise to exemplify the simplicity of the underlying technique for using dropdown menus on your website. Enjoy!

Tutorial kindly written by Nathan Wong

Got a question about this article? - Ask it here!