Ever had trouble with JavaScript based drop down menus?Do not fear! CSS-Menus are here!Yes, you read it right, completely CSS generated drop down menus. We, at Wallwisher, always try to minimize the JavaScript on our home page, so as to reduce the loading time, and hence came to birth CSS-Menus, a completely CSS based drop down menu. You can see the effects on our live site, before looking into the code…So, let’s say you want to build a similar drop down menu, with the trigger text called “Click Here”, and three example links in the drop down. Here’s a sample code on how to do so…

 <ul class="dd_menu"> 

    <li>Click Here</li> 

    <li><a href="http://www.example.com">Example 1</a></li>

    <li><a href="http://www.example.com" >Example 2</a></li>

    <li><a href="http://www.example.com">Example 3</a></li> 

</ul>

<style> 

    .dd_menu li { display: none; } 

    .dd_menu li:first-child { display: block; }

    .dd_menu:hover li { display:block; }

</style>

 As you will notice, by default the <a> tags in the main span are hidden. However, on hovering over the .dd_menu class, we display the .dd_link class, making all the <a> tags visible. This works perfectly in IE 7, Opera 9, and Safari 2. We sincerely hope this helps all developers out there, as it is so simple to use, and very elegant in the context of simple UI.