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;
	margin:0;
	padding:0;
}

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

ul a{
	display:block;
}

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 */

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

Initial URL
http://codesnipp.it/code/776

Initial Description


Initial Title
Pure CSS dropdown menu

Initial Tags


Initial Language
HTML