Baniboy 3 Report post Posted June 16, 2009 I don't know if there are many other sites offering css-only drop-down menus. But what I know, is that most of drop-down menu tutorials use javascript. If any moderator thinks that this useless or you can find this all over the net, please remove it, because I didn't do much research on this and I just coded it to help other members who don't like javascript.This tutorial shows you how to create a CSS-only drop-down menu. The code is provided with an explanation, if you have any questions or problems, please ask.The code provided is compatible with the following browsers: Mozilla Firefox, Apple safari, Google Chrome, Opera and Internet Explorer. If you find any bugs, please report back in this topic so I can fix them.So here's the code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://forums.xisto.com/no_longer_exists/ xmlns="http://forums.xisto.com/no_longer_exists/; xml:lang="en" lang="en" > <head> <title>test</title> <style type="text/css"> /* styling and positioning, modify freely */ .menu { background: #ccc; border: solid blue 2px; width: 200px; padding-left: 10px; position: absolute; /* I don't suggest modifying this, exept if you don't mind moving your content with the drop-down menu */ top: 0px; left: 0px; font-size: 20px; } .menu ul { list-style-type: none; padding-left: 5px; display: none; /* this is the main idea, without hovering on anything, I'm using display: block to make the mennu invisible */ margin-top: 0px; } .menu:hover ul { display: block; /* making it visible again when you hover on .menu */ } .content { margin-top: 40px; /* Since the menu's position is absolute, you have to place the content so it doesn't disappear under the menu */ } </style> </head> <body> <div class="menu">Menu <ul> <li><a href="#">link1</a></li> <li><a href="#">link2</a></li> <li><a href="#">link3</a></li> </ul> </div> <div class="content"> Another incredibly ugly thing made by Baniboy: Only CSS drop-down menu. Don't forget to set the position: absolute for the menu bar if you don't want your content to move down!!! Enjoy my masterpiece :P </div> </body></html> The main idea is, when you hover on the .menu (div element), the ul list becomes visible, otherwise it's invisible.Well, that's all, it's that easy to do. Share this post Link to post Share on other sites
Saint_Michael 3 Report post Posted July 10, 2009 Not bad of a starter CSS drop down menu but I know of a website that that hundreds upon hundreds of different ways to design a javascriptless CSS drop down menu.http://www.cssplay.co.uk/menus/This is a great site to get ideas to design a drop down menu or even use it as is depending what your website looks like. Share this post Link to post Share on other sites
Manifest 0 Report post Posted July 17, 2009 I thought the preferred method had moved onto position:absolute; and left:-999em; instead of display:hidden; then on the hover set left:0em; simply so the menu works on screen readers and the like. Share this post Link to post Share on other sites
