Pure CSS Drop Down Menu

Overview – Pure CSS Drop Down Menu

In this article, I will show you have to create a Pure CSS Drop Down Menu without using any Javascript. We create the css drop down menu, we create an ‘unordered list’ (which is a series or <ul> and <li> tags) and then apply our css style to the unordered list in order to position the menus and submenus correctly. We also display and hide the drop down submenus using pure css without the need for using javascript.

Note! – The CSS and HTML code provided below does not have any visual styling applied to it, other than what is needed to allow the css drop down menu to function correctly. I have attempted to use the least amount of CSS and HTML code for this article to allow you to see how css drop down menus work without confusing you by all the pretty borders, backgrounds and colours.

Demonstration

The two drop down menus below are and example of what you the Pure CSS Drop Down Menu tutorial will teach you. Mouse over the below links to see the css drop down menus in action.

The first menu is exactly what the css and html code in this article will achieve.

 
And the second menu is after I have applied some additional css styling such as colouring and background styling to the css menu. The styling of this menu is not covered in this tutorial.

 

CSS Code

Below is the CSS code we will apply to the css drop down menu. We will show and hide the submenus by setting the submenu left position to -999em rather than setting display to none. The reason is because using ‘left’ position rather than ‘display: none’ allows for better accessibility.

<style type="text/css">

/* our navigation container (which is the top level ul) */
#nav {
	float: left;
	padding: 0;
	margin: 0;
}

/* all li's */
#nav li {
	float: left;
	list-style: none;
}

/* override float value for all sublevel li's */
#nav ul li {
	float: none;
}

/* sub level ul's */
#nav ul {
	position: absolute;
	padding: 0;
	margin: 0;
	left: -999em; /* we position off screen rather than display: none; */
}

/* Here is the magic: when we hover over the li, then position the submenu ul
	It will make it appear as if the submenu ul is appearing as a drop down */
#nav li:hover ul {
	left: auto; /* bring the sub menu into view (i.e. override the left: -999em;) */
}

</style>

HTML Code

Now we add the html code which is just an unordered list. The above css will style the below html code and make it appear as a drop down menu. All the top level li’s are the menu links and the nested ul tags will become the submenus for the drop down menu and the li within the nested ul’s are the links on the submenu.

<ul id="nav">
	<li>
		<a href="#-">Home</a>
	</li>
	<li>
		<a href="#-">Products</a>
		&lt!-- these nested ul's will become the sub menu items -->
		<ul>
			<li><a href="#-">Some product</a></li>
			<li><a href="#-">Another product</a></li>
			<li><a href="#-">Product again</a></li>
			<li><a href="#-">Too many products</a></li>
		</ul>
	</li>
	<li>
		<a href="#-">Legal</a>
		<ul>
			<li><a href="#-">Disclaimer</a></li>
			<li><a href="#-">Terms of use</a></li>
			<li><a href="#-">End user license agreement</a></li>
			<li><a href="#-">Privacy policy</a></li>
			<li><a href="#-">Service level agreement</a></li>
		</ul>
	</li>
	<li>
		<a href="#-">About</a>
	</li>
</ul>

Now all that is left is to add your styling. You can add borders, background colour, background gradients and better colours to make your Pure CSS Drop Down Menu more amazing.

4 Responses to Pure CSS Drop Down Menu

  1. avatar Joseph says:

    Excellent, but it would be better if in future you can share more about this topic. making good content.

  2. [...] Pure CSS Drop Down Menu – Drop downs are found in most or perhaps all websites these days. This article will teach you how to create Pure CSS Drop Down Menus that are quick and W3C Compliant. The CSS menus are provided using as little code possible to keep the example clean, tidy and easy to understand. read more » [...]

  3. I know it’s been a while since you posted this, but I was on a semi-desperate search to find a purely css way to do a drop-down menu. Thank you! Extraordinarily simple — as much as I think I know, I don’t know it all… yet. It works like a charm!

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>