How to Make Pure CSS Drop-Down Menus
- 1). Insert the following CSS code between the "head" tags of your HTML document:
<style type="text/css">
.menu{
display:inline-block;
position:relative;
}
.menucontent{
visibility:hidden;
position:absolute;
width:100%;
}
.menu:hover .menucontent{
visibility:visible;
}
</style> - 2). Add the following code to the body of your HTML document:
<div>Drop-down Menu
<span>
<a href="/links/?u=page1.html">Item 1</a>
<a href="/links/?u=page2.html">Item 2</a>
<a href="/links/?u=page3.html">Item 3</a>
</span>
</div> - 3). Save the page and load it in a Web browser. Move your mouse over the "Drop-down Menu" text, and the menu items appear. Put any HTML content you like between the "span" tags to make a customized menu. Reuse the HTML code wherever you want a drop-down menu on your page.
Source...