I want this dropdown: http://freshdesignweb.com/demo/2012/09/drop-down-responsive-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.
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
<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>
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.
I can´t get it work with:
.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.
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>:
<!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>
I see superfish works fine with HTML5, anyway thanks!