Jump to content
xisto Community

Css Only Drop-down Menu Dont like javascript? Try this

Recommended Posts

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

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.


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

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.