Drop down without JavaScript

**lantiqo** · Dec 11, 2012 06:02

I want this dropdown: http://freshdesignweb.com/demo/2012/...sponsive-menu/ to work without JavaScript enabled in your browser. What does not work without JavaScript is submenus do not want to be seen. I want to either be able to click on the "Portfolio" or "Blog" to see the submenus or that it just works without JavaScript.

**vectorialpx** · Dec 11, 2012 06:34

You can have full-CSS menu but the browser must support the hover action for non-button elements.
So, without Internet Exploder, life would be better

Code:

<style>
	* { font:12px Arial; color:#333; margin:0; padding:0; }
	.cssmenu { }
	.cssmenu li { list-style:none; float:left; padding:3px 10px; background:#fc0; cursor:pointer; }
	.cssmenu li a { text-decoration:none; color:#000 }
	.cssmenu li ul { position:absolute; display:none; margin:1px 0 0 0; }
	.cssmenu li ul li { display:block; float:none; }
	.cssmenu li:hover ul { display:block; }
</style>

<ul class="cssmenu">
	<li>This has a submenu
		<ul>
			<li><a href="#">button 1. 1.</a></li>
			<li><a href="#">button 1. 2.</a></li>
			<li><a href="#">button 1. 3.</a></li>
		</ul>
	</li>
	<li><a href="#">Some button</a></li>
	<li>Another submenu
		<ul>
			<li><a href="#">button 1. 1.</a></li>
			<li><a href="#">button 1. 2.</a></li>
			<li><a href="#">button 1. 3.</a></li>
		</ul>
	</li>
	<li><a href="#">Another button</a></li>
</ul>

**ralph.m** · Dec 11, 2012 07:21

One of the classic dropdowns is called Suckerfish, and a JS-enhanced version of it called Superfish is also very popular. With JS off, the superfish menu works just fine, falling back to the CSS-only Suckerfish menu. I recommend you take that for a spin.

**treacle0996** · Dec 11, 2012 10:48

http://pmob.co.uk/ is definitely worth a look

**lantiqo** · Dec 12, 2012 06:57

Originally Posted by vectorialpx

You can have full-CSS menu but the browser must support the hover action for non-button elements.
So, without Internet Exploder, life would be better

Code:

<style>
	* { font:12px Arial; color:#333; margin:0; padding:0; }
	.cssmenu { }
	.cssmenu li { list-style:none; float:left; padding:3px 10px; background:#fc0; cursor:pointer; }
	.cssmenu li a { text-decoration:none; color:#000 }
	.cssmenu li ul { position:absolute; display:none; margin:1px 0 0 0; }
	.cssmenu li ul li { display:block; float:none; }
	.cssmenu li:hover ul { display:block; }
</style>

<ul class="cssmenu">
	<li>This has a submenu
		<ul>
			<li><a href="#">button 1. 1.</a></li>
			<li><a href="#">button 1. 2.</a></li>
			<li><a href="#">button 1. 3.</a></li>
		</ul>
	</li>
	<li><a href="#">Some button</a></li>
	<li>Another submenu
		<ul>
			<li><a href="#">button 1. 1.</a></li>
			<li><a href="#">button 1. 2.</a></li>
			<li><a href="#">button 1. 3.</a></li>
		</ul>
	</li>
	<li><a href="#">Another button</a></li>
</ul>

I can´t get it work with:

Code:

.cssmenu li:hover ul { display:block; }

Am I doing something wrong?

**ralph.m** · Dec 12, 2012 07:29

Originally Posted by lantiqo

I can´t get it work with:

Code:

.cssmenu li:hover ul { display:block; }

Am I doing something wrong?

Can you show us you full code? Post the full code you are using, or better still, a link to what you have.

On the site treacle linked to, there is a nice, simple example here:

http://www.pmob.co.uk/temp/dropdown_horizontal2.htm

BTW, whether you are using HTML5 or something different, the code is the same.

**vectorialpx** · Dec 12, 2012 07:34

That was just a "test" code

to prove that older versions of IE will not know about the ":hover"
So, if you insist, just add all page-elements <doctype, html, head, body>:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<title>Menu</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8">
	<style>
	* { font:12px Arial; color:#333; margin:0; padding:0; }
	.cssmenu { }
	.cssmenu li { list-style:none; float:left; padding:3px 10px; background:#fc0; cursor:pointer; }
	.cssmenu li a { text-decoration:none; color:#000 }
	.cssmenu li ul { position:absolute; display:none; margin:1px 0 0 0; }
	.cssmenu li ul li { display:block; float:none; }
	.cssmenu li:hover ul { display:block; }
	</style>
</head>
<body>
<ul class="cssmenu">
	<li>This has a submenu
		<ul>
			<li><a href="#">button 1. 1.</a></li>
			<li><a href="#">button 1. 2.</a></li>
			<li><a href="#">button 1. 3.</a></li>
		</ul>
	</li>
	<li><a href="#">Some button</a></li>
	<li>Another submenu
		<ul>
			<li><a href="#">button 1. 1.</a></li>
			<li><a href="#">button 1. 2.</a></li>
			<li><a href="#">button 1. 3.</a></li>
		</ul>
	</li>
	<li><a href="#">Another button</a></li>
</ul>
</body>
</html>

**lantiqo** · Dec 12, 2012 07:34

I see superfish works fine with HTML5, anyway thanks!

User Tag List

Thread: Drop down without JavaScript

Thread Tools

Display

Drop down without JavaScript

Bookmarks

Bookmarks

Posting Permissions