Revision: 29330
Initial Code
Initial URL
Initial Description
Initial Title
Initial Tags
Initial Language
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