Return to Snippet

Revision: 29330
at July 27, 2010 06:03 by troynt

Initial Code
/* An accessible Pure CSS dropdown menu */
/* It won`t work in IE6 but it can easily fixed using JavaScript */
/* by Ahmed El Gabri */

/* CSS */

ul {
	float: left;
	list-style: none;

ul li {
	float: left;
	margin-right: 10px;

ul a{

ul li ul { /* this hides the menu from the screen but still visible for screen readers */
	position: absolute;
	left: -9999px;

li:hover > ul {
	left: auto;

/* HTML */

<li><a href="#" title="home">home</a></li>
<li><a href="#" title="about">about</a></li>
<li><a href="#" title="portfolio">portfolio</a>
		<li><a href="#" title="level 1">level 1</a></li>
		<li><a href="#" title="level 1">level 1</a></li>
<li><a href="#" title="contact">contact</a></li>

Initial URL

Initial Description

Initial Title
Pure CSS dropdown menu

Initial Tags

Initial Language