tag:blogger.com,1999:blog-41600813939713498712024-02-08T16:47:55.883+01:00ThinkHTMLWeb Ideas Timo Huovinenhttp://www.blogger.com/profile/03601349277118301163noreply@blogger.comBlogger9125tag:blogger.com,1999:blog-4160081393971349871.post-51335450704397468732014-03-24T19:34:00.003+01:002014-03-24T19:36:29.868+01:00How to make delegated jQuery plugins<p>jQuery plugins are just functions attached to the jQuery object</p><p>There are 2 types of plugins that you can make<br />
</p><ul><li>Plain functions, like the <a href="https://api.jquery.com/jQuery.each/">jQuery.each</a></p></li>
<li>functions that work with a jQuery selection, like <a href="https://api.jquery.com/each/">jQuery().each</a></p></li>
</ul><br />
<h2>How to make a jQuery function plugin</h2><pre><code>
(function($){
$.highest = function(){
return Array().slice.call( arguments ).sort(function(a,b){
return b - a;
});
};
})(jQuery);
</code>
</pre><p>Usage</p><pre><code>
jQuery.highest(1, 1, 2, 3);
</code>
</pre><h2>How to make a jQuery selection plugin</h2><pre><code>
(function($){
$.fn.reverse = [].reverse;
})(jQuery);
</code>
</pre><p>Put it in a javascript file</p><p>You can run it like this:</p><pre><code>
jQuery('dt').reverse().each(function(i, el){
console.log(el);
});
</code>
</pre><p>It will reverse the jQuery selection/stack, now you can run each backwards</p><p><a href="http://www.mail-archive.com/discuss@jquery.com/msg04261.html">Source</a></p><h2>How to run jQuery plugins</h2><p>This is for plugins that need to change the document as soon as they are run</p><h3>On ready (as soon as the document loads, before images)</h3><pre><code>
jQuery(function($, undefined){
$('.green').greenify();
});
</code>
</pre><h3>On load (as soon as the document and all the images load)</h3><pre><code>
jQuery(document).load(function($, undefined){
$('.green').greenify();
});
</code>
</pre><h2>How to make delegated jQuery plugins <br />
(For dynamically changing HTML)</h2><pre><code>
(function($){
$.greeinfyOnClick = function(selector){
$(document).on('click', selector, function(){
$(this).css('color','green');
});
};
})(jQuery);
</code>
</pre><h2>How to run delegated jQuery plugins</h2><p>You can run these in the >head< of the document before the document is even ready</p><pre><code>
(function($){
$.greeinfyOnClick('a');
})(jQuery);
</code>
</pre><p>The advantage of delegated plugins is that they will work even if you replace all the elements in the document</p><p>The other advantage is that this will work immediately, even before the document is loaded (perfect for plugins that need to be responsive, like lightboxes)</p><p>All event based plugins should use this method</p>Timo Huovinenhttp://www.blogger.com/profile/03601349277118301163noreply@blogger.com0tag:blogger.com,1999:blog-4160081393971349871.post-19996543211556734042013-10-19T18:53:00.001+02:002013-10-19T18:53:34.575+02:00PDO Connection Boilerplate<code><pre>$db_server = 'localhost';
$db_port= '3306';
$db_name = 'test';
$db_user = 'user';
$db_pass = 'pass';
$dsn = 'mysql:host='.$db_server.';dbname='.$db_name.';port='.$db_port;
$driver_options = array(
PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES 'utf8'",
PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
);
$dbh = new PDO( $dsn, $db_user, $db_pass, $driver_options );
</pre></code>Timo Huovinenhttp://www.blogger.com/profile/03601349277118301163noreply@blogger.com0tag:blogger.com,1999:blog-4160081393971349871.post-45311443408578496912010-12-23T20:50:00.011+01:002013-10-19T18:35:07.217+02:00What is a Dropdown Menu?<img alt="Dropdown menu example" src="http://i119.photobucket.com/albums/o126/yurikolovsky/dropdown.png" style="display: block; margin: 25px 0;" />
Dropdown-menu, "dropdown" for short.<br />
It is a top link, that you need to move your mouse over to reveal a menu of links. Often used in the navigation of a website, to allow for more links in less space.Timo Huovinenhttp://www.blogger.com/profile/03601349277118301163noreply@blogger.com0tag:blogger.com,1999:blog-4160081393971349871.post-20167655460837094042010-06-29T18:00:00.015+02:002013-10-19T18:35:17.410+02:00Experiments with fluid width CSS dropdown menu'sIn the middle of my current work flood I had another idea involving dropdowns, it seems my brain can't stop thinking about it until it's solved. Where the "fixed width" limitation has been my current gripe with my dropdown.
The new experimental solution seems to work in IE5-7 and Firefox.<br />
This method uses line alignment and inline-block to create a dropdown, it's 100% functional for all browsers if the dropdown links are horizontally aligned, but needs work for vertical alignment, For those who think IE6 does not support inline-block, well, it does :P<br />
Here is a sample of what I have so far, move your mouse over the "main" link and then down.<br />
<h2>
Inline-Block Dropdown</h2>
<h3>
Example<br />Only Firefox, IE6-7</h3>
<br />
<br />
<br />
<br />
<style type="text/css">
/*new method testing*/
/*does not work in IE7-8 or Opera*/
/*reset*/
#nav,
#nav ul {
padding:0;
margin:0;
}
#nav {
width:800px;
height:300px;
padding:15px;
}
#nav a {
color:#000;
}
/*colors*/
#nav .main {
padding:0 50px;
background:orange;
}
#nav .one {
padding:0 50px;
background:blue;
}
#nav .two {
padding:0 50px;
background:green;
}
#nav .three {
padding:0 50px;
background:purple;
}
#nav .main:hover {
background:#ffd485;
}
#nav .one:hover {
background:#8383ff;
}
#nav .two:hover {
background:#3f823f;
}
#nav .three:hover {
background:#783d78;
}
/*functionality*/
#nav li {
display:inline;
}
#nav a {
display:inline-block;
}
#nav li a.main {
vertical-align:top;
}
#nav a:hover {
margin-top:100px;
}
#nav li a.main:hover {
vertical-align:baseline;/*for ie6*/
position:relative;
top:-100px;
}
/*horizontal to vertical*/
#nav {
float:left;
}
#nav ul {
margin-top:-100px;
}
#nav ul a {
margin-right:-300px;
position:relative;
height:25px;
line-height:25px;
}
/*dirty trick, for now*/
#nav .one {
}
#nav .two {
top:25px;
}
#nav .three {
top:50px;
}
#nav {
margin-left:300px;
}
</style>
<ul id="nav">
<li><a class="box main" href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#main">main</a><ul>
<li><a class="one" href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#1">link 1</a></li>
<li><a class="two" href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#2">link two</a></li>
<li><a class="three" href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#3">link three</a></li>
</ul>
</li>
</ul>
<h3>
Code</h3>
<script language="javascript" src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js" type="text/javascript"></script>
<script language="javascript" src="http://google-code-prettify.googlecode.com/svn/trunk/src/lang-css.js" type="text/javascript"></script>
<script type="text/javascript">
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(prettyPrint);
</script>
<style type="text/css">
/* Pretty printing styles. Used with prettify.js. */
.str { color: #080; }
.kwd { color: #008; }
.com { color: #800; }
.typ { color: #606; }
.lit { color: #066; }
.pun { color: #660; }
.pln { color: #000; }
.tag { color: #008; }
.atn { color: #606; }
.atv { color: #080; }
.dec { color: #606; }
pre.prettyprint { padding: 2px; border: 1px solid #888; }
@media print {
.str { color: #060; }
.kwd { color: #006; font-weight: bold; }
.com { color: #600; font-style: italic; }
.typ { color: #404; font-weight: bold; }
.lit { color: #044; }
.pun { color: #440; }
.pln { color: #000; }
.tag { color: #006; font-weight: bold; }
.atn { color: #404; }
.atv { color: #060; }
}
.prettyprint .com {
color:#999999;
}
.prettyprint .pun {
color:#ff00ff;
}
.prettyprint .atn {
color:#006600;
}
.prettyprint .atv {
color:#0000ff;
}
.prettyprint .dec {
color:#000099;
}
.prettyprint .tag {
color:#000099;
}
.prettyprint .kwd {
color:#000099;
}
.prettyprint .lit {
color:#0000ff;
}
.prettyprint .pln {
color:#000000;
}
</style>
<br />
<div style="border: solid #000 1px; height: 400px; margin-bottom: 50px; overflow: scroll; position: relative; white-space: nowrap; width: 600px;">
<code class="prettyprint lang-html">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><br />
<title>Inline-Block Dropdown Test</title><br />
<style type="text/css"><br />
/*new method testing*/<br />
/*does not work in IE7-8 or Opera*/<br />
/*reset*/ <br />
#nav,<br />
#nav ul {<br />
padding:0;<br />
margin:0;<br />
}<br />
<br />
#nav a {<br />
color:#000;<br />
}<br />
<br />
/*colors*/<br />
.main {<br />
padding:0 50px;<br />
background:orange;<br />
}<br />
.one {<br />
padding:0 50px;<br />
background:blue;<br />
}<br />
.two {<br />
padding:0 50px;<br />
background:green;<br />
}<br />
.three {<br />
padding:0 50px;<br />
background:purple;<br />
}<br />
<br />
.main:hover {<br />
background:#ffd485;<br />
}<br />
.one:hover {<br />
background:#8383ff;<br />
}<br />
.two:hover {<br />
background:#3f823f;<br />
}<br />
.three:hover {<br />
background:#783d78;<br />
}<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
/*functionality*/<br />
li {<br />
display:inline;<br />
}<br />
#nav a {<br />
display:inline-block;<br />
}<br />
#nav li a.main {<br />
vertical-align:top;<br />
}<br />
#nav a:hover {<br />
margin-top:100px;<br />
}<br />
#nav li a.main:hover {<br />
vertical-align:baseline;/*for ie6*/<br />
position:relative;<br />
top:-100px;<br />
}<br />
<br />
<br />
<br />
/*horizontal to vertical*/<br />
#nav {<br />
float:left;<br />
}<br />
#nav ul {<br />
margin-top:-100px;<br />
}<br />
<br />
#nav ul a {<br />
margin-right:-300px;<br />
position:relative;<br />
height:25px;<br />
line-height:25px;<br />
}<br />
<br />
/*dirty trick, for now*/<br />
#nav .one {<br />
<br />
}<br />
#nav .two {<br />
top:25px;<br />
}<br />
#nav .three {<br />
top:50px;<br />
}<br />
<br />
<br />
#nav {<br />
margin-left:300px;<br />
}<br />
<br />
</style><br />
<!--[if lte IE 7]><br />
<style type="text/css"><br />
<br />
</style><br />
<![endif]--><br />
</head><br />
<body><br />
<ul id="nav"><br />
<li><a href="#main" class="box main">main</a><ul><li><a href="#1" class="one">link 1</a></li><li><a href="#2" class="two">link two</a></li><li><a href="#3" class="three">link three</a></li></ul></li><br />
</ul><br />
</body><br />
</html>
</code>
</div>
<h3>
UPDATE</h3>
Stu Nicholls from cssplay.co.uk made this method work cross browser :D<br />
<a href="http://www.cssplay.co.uk/menus/inline-dropdown.html">http://www.cssplay.co.uk/menus/inline-dropdown.html</a>
<br />
This is just experimentation for fun.
If you have any suggestions or tips then feel free to comment.
Timo Huovinenhttp://www.blogger.com/profile/03601349277118301163noreply@blogger.com0tag:blogger.com,1999:blog-4160081393971349871.post-85190280203862952962009-12-15T11:01:00.012+01:002013-10-19T18:35:25.679+02:00Manually adjustable Float-drop multilevel dropdown menu<div style="position: relative; z-index: 10;">
A quick recap on how to make the Float-Drop dropper dropdown manually adjustable, for those who really need this menu to support variable width links.<br />
<h3 style="font-size: 1em;">
Is the same as the <a href="http://thinkhtml.blogspot.com/2009/10/float-drop-css-only-multilevel-dropdown.html">Float-Drop menu</a>, but with some more customization.</h3>
<h3 style="font-size: 1em;">
Demonstration of the Dropdown:</h3>
</div>
<h2>
Example</h2>
<div id="dropdownexample" style="margin-bottom: 500px;">
<!-- dropdown start -->
<style type="text/css">
/*made by Timo Huovinen*/
/***reset default styling***/
.nav {
font-size:1.2em;
}
.nav,
.nav ul{
list-style-type:none;
margin:0;
padding:0;
}
.nav a {
text-decoration:none;
}
/*CUSTOMIZATION*/
/*i have split the code to have the width/height/color separate from the rest of the code*/
/*COLORS*/
/*here are some default colors, funky colors used for distinctive visibility*/
/*i hope that you can handle colors customization on your own :p*/
.nav {
background:yellow;
}
.nav a {
background:#9C3;
color:#000;
}
.nav ul {
background:red;/*top link persistent background color*/
}
.nav a.main {
background:transparent;/*so that the top link persistent background works*/
}
.nav ul a.main {
background:yellow;
}
.nav a.main:hover {
background:orange;
}
.nav .sub ul a {
background:#CC6;
}
.nav .sub ul a.main {
background:yellow;
}
.nav .sub ul a.main:hover {
background:orange;
}
.nav a:hover,
.nav a:focus,
.nav a:active{
background:orange;
}
.nav .sub li a:hover,
.nav .sub li a:focus,
.nav .sub li a:active{
background:#C93;
}
/*WIDTH (!IMPORTANT)*/
/*change each width value below, else the dropdown will stop working (:hover will still work in modern browsers because of the opera fix)*/
/*set the link width here*/
.nav .link,
.nav a {
width:9em;/*same as width*/
}
.nav ul li {
/*force ie8 to float-drop*/
max-width:9em;/*same as width*/
}
/*set the sublink left shift width here (same as width)*/
.nav ul ul {
/*move the sublinks to the side, so they dont overlap*/
left:9em;/*same as width*/
}
.nav li.reversed ul {/*reverse the direction of sublinks for the last dropdown*/
left:auto;
right:9em;/*same as width*/
}
/*add the negative value of "width - 1px" here (because css can't do math)*/
/*or (width - 0.063em) where 0.063em is 1px on 16px base size*/
.nav a {
/*makes the links very thin, so that the sublinks can hide inside the main link*/
/*!IMPORTANT: if you want a width of 9em, then you will have to change the value below to 8.937em (because: 9 - 0.063 = 8.973)*/
margin-right:-8.937em;/*make this width - 1px*//*or width - 0.063em (0.063 = 1px)*/
}
/*<customized width and positioning>*/
/*ONE*/
.nav .link.one {
margin-right:20px;
}
.nav .link.one,
.nav .one a {
width:11em;
}
.nav .one ul li {
max-width:11em;
}
.nav .one ul ul {
left:11em;
}
.nav .one a {
margin-right:-10.937em;/*11 - 0.063 = 10.937em (0.063 = 1px)*/
}
/*TWO*/
.nav .link.two {
margin-right:20px;
}
.nav .link.two,
.nav .two a {
width:3em;
}
.nav .two ul li {
max-width:3em;
}
.nav .two ul ul {
left:3em;
}
.nav .two a {
margin-right:-2.937em;/*3 - 0.063 = 2.937em (0.063 = 1px)*/
}
/*THREE*/
.nav .link.three {
margin-right:2px;
}
.nav .link.three,
.nav .three a {
width:9em;
}
.nav .three ul li {
max-width:9em;
}
.nav li.reversed.three ul {/*this is because its reversed*/
right:9em;/*same as width*/
}
.nav .three a {
margin-right:-8.937em;
}
/*</customized width and positioning>*/
/*HEIGHT*/
.nav {
height:1.563em;/*you could remove this and clear the float differently, but to me this makes the most sense*/
}
.nav a {
padding:.2em 0;/*apply padding to links, to vertically center them, be careful with horizontal padding in IE5, correct width must be maintained*/
}
.nav a.main {
height:1.563em;/*needs to be the same as the persistent background trick and so that the sublevels are properly aligned*/
line-height:1.563em;/*not really necessary, but in this specific case it vertically centers the main link text*/
overflow:hidden;/*making it more bulletproof*/
padding:0;/*remove the padding that was applied above*/
}
.nav ul {
padding-top:1.563em;/*persistent background trick*/
margin-top:-1.563em;/*persistent background trick*/
}
.nav ul ul {
position:relative;/*so that it can be moved top/left*/
top:-1.563em;/*this is the sole reason why the main links must have a fixed height*/
}
/*Dropper Dropdown*/
/*supports up to 4 sub-levels in IE5-7, more can be added*/
/*modern browsers already support any amount of sublevels*/
/*made by Timo Huovinen*/
.nav li {
float:left;/*fixes several IE related bugs, and allows for clearing*/
}
.nav ul {
float:left;/*necessary for float drop*/
}
.nav ul li {
clear:left;/*must clear the floated list item inside sublist*/
}
.nav a {
position:relative;/*needs to have a position, to be above the rest*/
display:block;
}
.nav a.main {
float:left;/*necessary for float drop*/
margin-top:10000px;/*bring the links back into view*/
}
.nav .link,
.nav .sub {
margin-top:-10000px;/*hide the links and their containers, opera has low upper limits*/
}
.nav ul {
margin-bottom:-5000px;/*avoid any interaction between the sub's, can be any large size*/
}
/*the main trick, removes the negative right-margin and causes float drop*/
.nav a:hover,
.nav a:focus,
.nav a:active{
margin-right:0;
}
/*OPERA fix*/
.nav ul:hover {
clear:left;/*fix for opera sublinks flickering on :hover*/
}
/*background no longer needed*/
.nav ul ul {
background:transparent;
}
/*IE5-6 + 7 bug fixes*/
.nav .sub {
width:100%;
}
/*empty rule to fix occassional IE6 tabbing bug, one of the weirdest bug's i have seen.
it seems that this indexes the links together as one? does not happen for everyone, but im leaving it just in case.*/
a, a:hover, a:active, a:focus {}
</style>
<a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#background1">background 1</a>
<br />
<ul class="nav">
<li class="link one">
<a class="main" href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#">Main</a>
<ul>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#1">test1</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#2">test2</a></li>
<li class="sub"><a class="main" href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#3">main 1 »</a>
<ul>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest1">sub test 1</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest2">sub test 2</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest3">sub test 3</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest4">sub test 4</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest5">sub test 5</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest6">sub test 6</a></li>
</ul>
</li>
<li class="sub"><a class="main" href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#4">main 2 »</a>
<ul>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest1">sub test 1</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest2">sub test 2</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest3">sub test 3</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest4">sub test 4</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest5">sub test 5</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest6">sub test 6</a></li>
</ul>
</li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#5">test5</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#6">test6</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#7">long text link showing what happens</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#8">test8</a></li>
<li class="sub"><a class="main" href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#9">Everything is possible</a>
<ul>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest1">sub test 1</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest2">sub test 2</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest3">sub test 3</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest5">sub test 5</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest6">sub test 6</a></li>
</ul>
</li>
</ul>
</li>
<li class="link two">
<a class="main" href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#">Main</a>
<ul>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#1">test1</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#2">test2</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#3">test3</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#4">test4</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#5">test5</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#6">test6</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#7">test7</a></li>
</ul>
</li>
<li class="link reversed three">
<a class="main" href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#">Main</a>
<ul>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#1">test1</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#2">test2</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#3">test3</a></li>
<li class="sub"><a class="main" href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#4">test4 »</a>
<ul>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest1">sub test 1</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest2">sub test 2</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest3">sub test 3</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest4">sub test 4</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest5">sub test 5</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest6">sub test 6</a></li>
</ul>
</li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#5">test5</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#6">test6</a></li>
<li class="sub"><a class="main" href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#7">test7 »</a>
<ul>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest1">sub2 test 1</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest2">sub2 test 2</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest3">sub2 test 3</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest4">sub2 test 4</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest5">sub2 test 5</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest6">sub2 test 6</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#background2">background 2</a>
<!-- dropdown end -->
</div>
<h3 style="font-size: 1em;">
HTML Code for the dropdown:</h3>
<div style="border: solid #000 1px; height: 400px; margin-bottom: 50px; overflow: scroll; position: relative; white-space: nowrap; width: 600px;">
<code class="prettyprint lang-html"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>TH - CSS Only Multilevel Dropdown</title><br />
<style type="text/css"><br />
/***reset default styling***/<br />
.nav,<br />
.nav ul{<br />
list-style-type:none;<br />
margin:0;<br />
padding:0;<br />
}<br />
.nav a {<br />
text-decoration:none;<br />
}<br />
/*CUSTOMIZATION*/<br />
/*i have split the code to have the width/height/color separate from the rest of the code*/<br />
/*COLORS*/<br />
/*here are some default colors, funky colors used for distinctive visibility*/<br />
/*i hope that you can handle colors customization on your own :p*/<br />
.nav {<br />
background:yellow;<br />
}<br />
.nav a {<br />
background:#9C3;<br />
color:#000;<br />
}<br />
.nav ul {<br />
background:red; /*top link persistent background color*/<br />
}<br />
.nav a.main {<br />
background:transparent; /*so that the top link persistent background works*/<br />
}<br />
.nav ul a.main {<br />
background:yellow;<br />
}<br />
.nav a.main:hover {<br />
background:orange;<br />
}<br />
.nav .sub ul a {<br />
background:#CC6;<br />
}<br />
.nav .sub ul a.main {<br />
background:yellow;<br />
}<br />
.nav .sub ul a.main:hover {<br />
background:orange;<br />
}<br />
.nav a:hover,<br />
.nav a:focus,<br />
.nav a:active{<br />
background:orange;<br />
}<br />
.nav .sub li a:hover,<br />
.nav .sub li a:focus,<br />
.nav .sub li a:active{<br />
background:#C93;<br />
}<br />
<br />
/*WIDTH (<b>!IMPORTANT</b>)*/<br />
/*change each width value below, else the dropdown will stop working (:hover will still work in modern browsers because of the opera fix)*/<br />
/*set the link width here*/<br />
.nav .link, <br />
.nav a {<br />
width:9em; /*same as width*/<br />
}<br />
.nav ul li {<br />
/*force ie8 to float-drop*/<br />
max-width:9em; /*same as width*/<br />
}<br />
/*set the sublink left shift width here (same as width)*/<br />
.nav ul ul {<br />
/*move the sublinks to the side, so they dont overlap*/<br />
left:9em; /*same as width*/<br />
}<br />
.nav li.reversed ul { /*reverse the direction of sublinks for the last dropdown*/<br />
left:auto;<br />
right:9em; /*same as width*/<br />
}<br />
/*add the negative value of "width - 1px" here (because css can't do math)*/<br />
/*or (width - 0.063em) where 0.063em is 1px on 16px base size*/<br />
.nav a {<br />
/*makes the links very thin, so that the sublinks can hide inside the main link*/<br />
/*<b>!IMPORTANT</b>: if you want a width of 9em, then you will have to change the value below to 8.937em (because: 9 - 0.063 = 8.973)*/<br />
margin-right:-8.937em; /*make this width - 1px*//*or width - 0.063em (0.063 = 1px)*/<br />
}<br />
<br />
/*<customized width and positioning>*/<br />
/*ONE*/<br />
.nav .link.one {<br />
margin-right:20px;<br />
}<br />
.nav .link.one, <br />
.nav .one a {<br />
width:11em;<br />
}<br />
.nav .one ul li {<br />
max-width:11em;<br />
}<br />
.nav .one ul ul {<br />
left:11em;<br />
}<br />
.nav .one a {<br />
margin-right:-10.937em; /*11 - 0.063 = 10.937em (0.063 = 1px)*/<br />
}<br />
/*TWO*/<br />
.nav .link.two {<br />
margin-right:20px;<br />
}<br />
.nav .link.two, <br />
.nav .two a {<br />
width:3em;<br />
}<br />
.nav .two ul li {<br />
max-width:3em;<br />
}<br />
.nav .two ul ul {<br />
left:3em;<br />
}<br />
.nav .two a {<br />
margin-right:-2.937em; /*3 - 0.063 = 2.937em (0.063 = 1px)*/<br />
}<br />
/*THREE*/<br />
.nav .link.three {<br />
margin-right:2px;<br />
}<br />
.nav .link.three, <br />
.nav .three a {<br />
width:9em;<br />
}<br />
.nav .three ul li {<br />
max-width:9em;<br />
}<br />
.nav li.reversed.three ul { /*this is because its reversed*/<br />
right:9em; /*same as width*/<br />
}<br />
.nav .three a {<br />
margin-right:-8.937em;<br />
}<br />
/*</customized width and positioning>*/<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
/*HEIGHT*/<br />
.nav {<br />
height:1.563em; /*you could remove this and clear the float differently, but to me this makes the most sense*/<br />
}<br />
.nav a {<br />
padding:.2em 0; /*apply padding to links, to vertically center them, be careful with horizontal padding in IE5, correct width must be maintained*/<br />
}<br />
.nav a.main {<br />
height:1.563em; /*needs to be the same as the persistent background trick and so that the sublevels are properly aligned*/<br />
line-height:1.563em; /*not really necessary, but in this specific case it vertically centers the main link text*/<br />
overflow:hidden; /*making it more bulletproof*/<br />
padding:0; /*remove the padding that was applied above*/<br />
}<br />
.nav ul {<br />
padding-top:1.563em; /*persistent background trick*/<br />
margin-top:-1.563em; /*persistent background trick*/<br />
}<br />
.nav ul ul {<br />
position:relative; /*so that it can be moved top/left*/<br />
top:-1.563em; /*this is the sole reason why the main links must have a fixed height*/<br />
}<br />
<br />
<br />
/*Dropper Dropdown*/<br />
/*supports up to 4 sub-levels in IE5-7, more can be added*/<br />
/*modern browsers already support any amount of sublevels*/<br />
/*made by Timo Huovinen*/<br />
<br />
.nav li {<br />
float:left; /*fixes several IE related bugs, and allows for clearing*/<br />
}<br />
.nav ul {<br />
float:left; /*necessary for float drop*/<br />
}<br />
.nav ul li {<br />
clear:left; /*must clear the floated list item inside sublist*/<br />
}<br />
.nav a {<br />
position:relative; /*needs to have a position, to be above the rest*/<br />
display:block;<br />
}<br />
.nav a.main {<br />
float:left; /*necessary for float drop*/<br />
margin-top:10000px; /*bring the links back into view*/<br />
}<br />
.nav .link,<br />
.nav .sub {<br />
margin-top:-10000px; /*hide the links and their containers, opera has low upper limits*/<br />
}<br />
.nav ul {<br />
margin-bottom:-5000px; /*avoid any interaction between the sub's, can be any large size*/<br />
}<br />
/*the main trick, removes the negative right-margin and causes float drop*/<br />
.nav a:hover,<br />
.nav a:focus,<br />
.nav a:active{<br />
margin-right:0;<br />
}<br />
<br />
/*OPERA fix*/<br />
.nav ul:hover {<br />
clear:left; /*fix for opera sublinks flickering on :hover*/<br />
}<br />
/*background no longer needed*/<br />
.nav ul ul {<br />
background:transparent;<br />
}<br />
<br />
<br />
/*IE5-6 + 7 bug fixes*/<br />
.nav .sub {<br />
width:100%;<br />
}<br />
/*empty rule to fix occassional IE6 tabbing bug, one of the weirdest bug's i have seen.<br />
it seems that this indexes the links together as one? does not happen for everyone, but im leaving it just in case.*/<br />
a, a:hover, a:active, a:focus {}<br />
</style><br />
<!--I would also suggest adding some javascript to delay the closing of the sublinks, just to make it even better--><br />
</head><br />
<body><br />
<a href="#background1">background 1</a><br />
<ul class="nav"><br />
<li class="link one"><br />
<a class="main" href="#">Main</a><br />
<ul><br />
<li><a href="#1">test1</a></li><br />
<li><a href="#2">test2</a></li><br />
<li class="sub"><a class="main" href="#3">main 1 »</a><br />
<ul><br />
<li><a href="#subtest1">sub test 1</a></li><br />
<li><a href="#subtest2">sub test 2</a></li><br />
<li><a href="#subtest3">sub test 3</a></li><br />
<li><a href="#subtest4">sub test 4</a></li><br />
<li><a href="#subtest5">sub test 5</a></li><br />
<li><a href="#subtest6">sub test 6</a></li><br />
</ul><br />
</li><br />
<li class="sub"><a class="main" href="#4">main 2 »</a><br />
<ul><br />
<li><a href="#subtest1">sub test 1</a></li><br />
<li><a href="#subtest2">sub test 2</a></li><br />
<li><a href="#subtest3">sub test 3</a></li><br />
<li><a href="#subtest4">sub test 4</a></li><br />
<li><a href="#subtest5">sub test 5</a></li><br />
<li><a href="#subtest6">sub test 6</a></li><br />
</ul><br />
</li><br />
<li><a href="#5">test5</a></li><br />
<li><a href="#6">test6</a></li><br />
<li><a href="#7">long text link showing what happens</a></li><br />
<li><a href="#8">test8</a></li><br />
<li class="sub"><a class="main" href="#9">Everything is possible</a><br />
<ul><br />
<li><a href="#subtest1">sub test 1</a></li><br />
<li><a href="#subtest2">sub test 2</a></li><br />
<li><a href="#subtest3">sub test 3</a></li><br />
<li><a href="#subtest5">sub test 5</a></li><br />
<li><a href="#subtest6">sub test 6</a></li><br />
</ul><br />
</li><br />
</ul><br />
</li><br />
<li class="link two"><br />
<a class="main" href="#">Main</a><br />
<ul><br />
<li><a href="#1">test1</a></li><br />
<li><a href="#2">test2</a></li><br />
<li><a href="#3">test3</a></li><br />
<li><a href="#4">test4</a></li><br />
<li><a href="#5">test5</a></li><br />
<li><a href="#6">test6</a></li><br />
<li><a href="#7">test7</a></li><br />
</ul><br />
</li><br />
<li class="link reversed three"><br />
<a class="main" href="#">Main</a><br />
<ul><br />
<li><a href="#1">test1</a></li><br />
<li><a href="#2">test2</a></li><br />
<li><a href="#3">test3</a></li><br />
<li class="sub"><a class="main" href="#4">test4 »</a><br />
<ul><br />
<li><a href="#subtest1">sub test 1</a></li><br />
<li><a href="#subtest2">sub test 2</a></li><br />
<li><a href="#subtest3">sub test 3</a></li><br />
<li><a href="#subtest4">sub test 4</a></li><br />
<li><a href="#subtest5">sub test 5</a></li><br />
<li><a href="#subtest6">sub test 6</a></li><br />
</ul><br />
</li><br />
<li><a href="#5">test5</a></li><br />
<li><a href="#6">test6</a></li><br />
<li class="sub"><a class="main" href="#7">test7 »</a><br />
<ul><br />
<li><a href="#subtest1">sub2 test 1</a></li><br />
<li><a href="#subtest2">sub2 test 2</a></li><br />
<li><a href="#subtest3">sub2 test 3</a></li><br />
<li><a href="#subtest4">sub2 test 4</a></li><br />
<li><a href="#subtest5">sub2 test 5</a></li><br />
<li><a href="#subtest6">sub2 test 6</a></li><br />
</ul><br />
</li><br />
</ul><br />
</li><br />
</ul><br />
<a href="#background2">background 2</a><br />
<br />
<br />
</body><br />
</html>
</code>
<script language="javascript" src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js" type="text/javascript"></script>
<script language="javascript" src="http://google-code-prettify.googlecode.com/svn/trunk/src/lang-css.js" type="text/javascript"></script>
<script type="text/javascript">
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(prettyPrint);
</script>
<style type="text/css">
/* Pretty printing styles. Used with prettify.js. */
.str { color: #080; }
.kwd { color: #008; }
.com { color: #800; }
.typ { color: #606; }
.lit { color: #066; }
.pun { color: #660; }
.pln { color: #000; }
.tag { color: #008; }
.atn { color: #606; }
.atv { color: #080; }
.dec { color: #606; }
pre.prettyprint { padding: 2px; border: 1px solid #888; }
@media print {
.str { color: #060; }
.kwd { color: #006; font-weight: bold; }
.com { color: #600; font-style: italic; }
.typ { color: #404; font-weight: bold; }
.lit { color: #044; }
.pun { color: #440; }
.pln { color: #000; }
.tag { color: #006; font-weight: bold; }
.atn { color: #404; }
.atv { color: #060; }
}
.prettyprint .com {
color:#999999;
}
.prettyprint .pun {
color:#ff00ff;
}
.prettyprint .atn {
color:#006600;
}
.prettyprint .atv {
color:#0000ff;
}
.prettyprint .dec {
color:#000099;
}
.prettyprint .tag {
color:#000099;
}
.prettyprint .kwd {
color:#000099;
}
.prettyprint .lit {
color:#0000ff;
}
.prettyprint .pln {
color:#000000;
}
</style>
</div>
<!--end of customizable dropdown code-->
<br />
It has just some extra classes and css rules, to make life easier for those who need this, I have also removed some of the sublevels to make it look neater.<br />
<h3 style="font-size: 1em;">
Terms of use:</h3>
The software referenced within this license is distributed free of charge and free from any warranty. It may be used freely for any purpose whatsoever. The author created and released this work because he is genuinely a Nice Person!<br />
<br />
Users are encouraged to use, modify, distribute, improve and otherwise manipulate the code. After all, it’s free.<br />
<br />
The author sincerely hopes that end users enjoy and appreciate the hard work that went into creating it, and would appreciate being referenced in future modifications of the code since it was based on the author’s original concept and work.<br />
<br />
Users are nonetheless encouraged to provide reciprocity whenever possible as it provides positive reinforcement and encouragement to the author. Furthermore, the minimum reciprocation I ask is to leave a <b>‘thank you’</b> comment in the area below:
Timo Huovinenhttp://www.blogger.com/profile/03601349277118301163noreply@blogger.com9tag:blogger.com,1999:blog-4160081393971349871.post-65744971326050359372009-10-05T10:58:00.051+02:002013-10-19T18:35:34.593+02:00Float-drop CSS-only multilevel dropdown menu<div style="position: relative; z-index: 10;">
<h2>
Dropper Dropdown Multilevel Menu:</h2>
A multilevel CSS only dropdown menu<br />
<h3 style="font-size: 1em;">
same details apply as the <a href="http://thinkhtml.blogspot.com/2009/09/timos-float-drop-css-only-dropdown-menu.html">single level menu</a>:</h3>
<ul>
<li>This menu is <b>fixed width</b> for simplification purposes.</li>
<li>This menu uses <b>no javascript</b>.</li>
<li>This menu uses <b>no extra html</b>.</li>
<li>This menu is <b>keyboard accessible</b> without javascript.</li>
<li>This menu is <b>cross-browser</b> (tested in: IE5.5-IE8, Firefox, Opera, Safari(PC) and Google Chrome.).</li>
<li>This menu is <b>valid css/html</b>.</li>
<li>This menu was invented by me, simplified and improved with the help of <a href="http://www.pmob.co.uk/">Paul O'Brien</a> and <a href="http://dev.moonhenge.net/">Anton P</a>.</li>
</ul>
<h3 style="font-size: 1em;">
more details:</h3>
<ul style="margin-top: 0;">
<li>based on the <a href="http://thinkhtml.blogspot.com/2009/09/timos-float-drop-css-only-dropdown-menu.html">simplified dropdown</a></li>
</ul>
<h3 style="font-size: 1em;">
Demonstration of the Multilevel CSS Dropdown:</h3>
<a href="http://timo.geekcavecreations.com/multilevel.php">You can view it as a external page here</a>
</div>
<h2>
Example</h2>
<div id="dropdownexample" style="margin-bottom: 500px;">
<!-- dropdown start -->
<style type="text/css">
/*made by Timo Huovinen*/
/***reset default styling***/
.nav {
font-size:1.2em;
}
.nav,
.nav ul{
list-style-type:none;
margin:0;
padding:0;
}
.nav a {
text-decoration:none;
}
/*CUSTOMIZATION*/
/*i have split the code to have the width/height/color separate from the rest of the code*/
/*COLORS*/
/*here are some default colors, funky colors used for distinctive visibility*/
/*i hope that you can handle colors customization on your own :p*/
.nav {
background:yellow;
}
.nav a {
background:#9C3;
color:#000;
}
.nav ul {
background:red;/*top link persistent background color*/
}
.nav a.main {
background:transparent;/*so that the top link persistent background works*/
}
.nav ul a.main {
background:yellow;
}
.nav a.main:hover {
background:orange;
}
.nav .sub ul a {
background:#CC6;
}
.nav .sub ul a.main {
background:yellow;
}
.nav .sub ul a.main:hover {
background:orange;
}
.nav a:hover,
.nav a:focus,
.nav a:active{
background:orange;
}
.nav .sub li a:hover,
.nav .sub li a:focus,
.nav .sub li a:active{
background:#C93;
}
.nav .sub .sub ul a {
background:#099;
color:#fff;
}
.nav .sub .sub ul a:hover,
.nav .sub .sub ul a:focus,
.nav .sub .sub ul a:active{
background:#06F;
}
.nav .sub .sub .sub ul a {
background:#036;
}
.nav .sub .sub .sub ul a:hover,
.nav .sub .sub .sub ul a:focus,
.nav .sub .sub .sub ul a:active{
background:#006;
}
.nav .colored li a {
background:purple;
}
/*HEIGHT*/
.nav {
height:1.563em;/*you could remove this and clear the float differently, but to me this makes the most sense*/
}
.nav a {
padding:.2em 0;/*apply padding to links, to vertically center them, be careful with horizontal padding in IE5, correct width must be maintained*/
}
.nav a.main {
height:1.563em;/*needs to be the same as the persistent background trick and so that the sublevels are properly aligned*/
line-height:1.563em;/*not really necessary, but in this specific case it vertically centers the main link text*/
overflow:hidden;/*making it more bulletproof*/
padding:0;/*remove the padding that was applied above*/
}
.nav ul {
padding-top:1.563em;/*persistent background trick*/
margin-top:-1.563em;/*persistent background trick*/
}
.nav ul ul {
position:relative;/*so that it can be moved top/left*/
top:-1.563em;/*this is the sole reason why the main links must have a fixed height*/
}
/*WIDTH (!IMPORTANT)*/
/*change each width value below, else the dropdown will stop working (:hover will still work in modern browsers because of the opera fix)*/
/*set the link width here*/
.nav .link,
.nav a {
width:11em;/*same as width*/
}
.nav ul li {
/*force ie8 to float-drop*/
max-width:11em;/*same as width*/
}
/*set the sublink left shift width here (same as width)*/
.nav ul ul {
/*move the sublinks to the side, so they dont overlap*/
left:11em;/*same as width*/
}
.nav li.reversed ul {/*reverse the direction of sublinks for the last dropdown*/
left:auto;
right:11em;/*same as width*/
}
/*add the negative value of "width - 1px" here (because css can't do math)*/
/*or (width - 0.063em) where 0.063em is 1px on 16px base size*/
.nav a {
/*makes the links very thin, so that the sublinks can hide inside the main link*/
margin-right:-10.937em;/*make this width - 1px*//*or width - 0.063em*/
}
/*Dropper Dropdown*/
/*supports up to 4 sub-levels in IE5-7, more can be added*/
/*modern browsers already support any amount of sublevels*/
/*made by Timo Huovinen*/
.nav li {
float:left;/*fixes several IE related bugs, and allows for clearing*/
}
.nav ul {
float:left;/*necessary for float drop*/
}
.nav ul li {
clear:left;/*must clear the floated list item inside sublist*/
}
.nav a {
position:relative;/*needs to have a position, to be above the rest*/
display:block;
}
.nav a.main {
float:left;/*necessary for float drop*/
margin-top:10000px;/*bring the links back into view*/
}
.nav .link,
.nav .sub {
margin-top:-10000px;/*hide the links and their containers, opera has low upper limits*/
}
.nav ul {
margin-bottom:-5000px;/*avoid any interaction between the sub's, can be any large size*/
}
/*the main trick, removes the negative right-margin and causes float drop*/
.nav a:hover,
.nav a:focus,
.nav a:active{
margin-right:0;
}
/*OPERA fix*/
.nav ul:hover {
clear:left;/*fix for opera sublinks flickering on :hover*/
}
/*background no longer needed*/
.nav ul ul {
background:transparent;
}
/*IE5-6 + 7 bug fixes*/
.nav .sub {
width:100%;
}
/*empty rule to fix occassional IE6 tabbing bug, one of the weirdest bug's i have seen.
it seems that this indexes the links together as one? does not happen for everyone, but im leaving it just in case.*/
a, a:hover, a:active, a:focus {}
</style>
<a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#background1">background 1</a>
<br />
<ul class="nav">
<li class="link">
<a class="main" href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#">Main</a>
<ul>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#1">test1</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#2">test2</a></li>
<li class="sub"><a class="main" href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#3">main 1 »</a>
<ul class="colored">
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest1">sub test 1</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest2">sub test 2</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest3">sub test 3</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest4">sub test 4</a></li>
<li class="sub"><a class="main" href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#sub4">SUB main 1 »</a>
<ul>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest1">sub sub test 1</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest2">sub sub test 2</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest3">sub sub test 3</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest4">sub sub test 4</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest5">sub sub test 5</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest6">sub sub test 6</a></li>
</ul>
</li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest5">sub test 5</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest6">sub test 6</a></li>
</ul>
</li>
<li class="sub"><a class="main" href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#4">main 2 »</a>
<ul>
<li class="sub"><a class="main" href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#sub4">SUB main 2 »</a>
<ul>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest1">sub sub test 1</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest2">sub sub test 2</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest3">sub sub test 3</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest4">sub sub test 4</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest5">sub sub test 5</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest6">sub sub test 6</a></li>
</ul>
</li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest1">sub test 1</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest2">sub test 2</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest3">sub test 3</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest4">sub test 4</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest5">sub test 5</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest6">sub test 6</a></li>
</ul>
</li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#5">test5</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#6">test6</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#7">long text link showing what happens</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#8">test8</a></li>
<li class="sub"><a class="main" href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#9">Everything is possible</a>
<ul>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest1">sub test 1</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest2">sub test 2</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest3">sub test 3</a></li>
<li class="sub"><a class="main" href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#sub4">SUB test4 »</a>
<ul>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest1">sub sub test 1</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest2">sub sub test 2</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest3">sub sub test 3</a></li>
<li class="sub"><a class="main" href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#sub7">Ultra SUB test7 »</a>
<ul>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest1">sub sub test 1</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest2">sub sub test 2</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest3">sub sub test 3</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest4">sub sub test 4</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest5">sub sub test 5</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest6">sub sub test 6</a></li>
</ul>
</li>
<li class="sub"><a class="main" href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#sub7">Ultra SUB test8 »</a>
<ul>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest1">sub sub test 1</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest2">sub sub test 2</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest3">sub sub test 3</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest4">sub sub test 4</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest5">sub sub test 5</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest6">sub sub test 6</a></li>
</ul>
</li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest4">sub sub test 4</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest5">sub sub test 5</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest6">sub sub test 6</a></li>
</ul>
</li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest5">sub test 5</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest6">sub test 6</a></li>
<li class="sub"><a class="main" href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#sub7">SUB test7 »</a>
<ul>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest1">sub sub test 1</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest2">sub sub test 2</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest3">sub sub test 3</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest4">sub sub test 4</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest5">sub sub test 5</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest6">sub sub test 6</a></li>
</ul>
</li>
<li class="sub"><a class="main" href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#sub7">SUB test7 »</a>
<ul>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest1">sub sub test 1</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest2">sub sub test 2</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest3">sub sub test 3</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest4">sub sub test 4</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest5">sub sub test 5</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest6">sub sub test 6</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="link">
<a class="main" href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#">Main</a>
<ul>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#1">test1</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#2">test2</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#3">test3</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#4">test4</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#5">test5</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#6">test6</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#7">test7</a></li>
</ul>
</li>
<li class="link reversed">
<a class="main" href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#">Main</a>
<ul>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#1">test1</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#2">test2</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#3">test3</a></li>
<li class="sub"><a class="main" href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#4">test4 »</a>
<ul>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest1">sub test 1</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest2">sub test 2</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest3">sub test 3</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest4">sub test 4</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest5">sub test 5</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest6">sub test 6</a></li>
</ul>
</li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#5">test5</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#6">test6</a></li>
<li class="sub"><a class="main" href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#7">test7 »</a>
<ul>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest1">sub2 test 1</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest2">sub2 test 2</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest3">sub2 test 3</a></li>
<li class="sub"><a class="main" href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#sub7">SUB test7 »</a>
<ul>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest1">sub sub test 1</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest2">sub sub test 2</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest3">sub sub test 3</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest4">sub sub test 4</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest5">sub sub test 5</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest6">sub sub test 6</a></li>
</ul>
</li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest4">sub2 test 4</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest5">sub2 test 5</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#subtest6">sub2 test 6</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#background2">background 2</a>
<!-- dropdown end -->
</div>
<h3 style="font-size: 1em;">
HTML Code for the full multilevel dropdown menu (my original version):</h3>
<div style="border: solid #000 1px; height: 400px; margin-bottom: 50px; overflow: scroll; position: relative; white-space: nowrap; width: 600px;">
<code>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>TH - CSS Only Multilevel Dropdown</title><br />
<style type="text/css"><br />
/*made by Timo Huovinen*/<br />
<br />
ul {<br />
list-style-type:none;<br />
margin:0;<br />
padding:0;<br />
}<br />
<br />
#navigation {<br />
height:25px;<br />
}<br />
.nav {<br />
position:absolute;<br />
width:1000px;<br />
}<br />
li {<br />
float:left;<br />
}<br />
.link {<br />
position:relative;<br />
width:300px;<br />
height:10025px;/*10000 + 25*/<br />
margin-top:-10000px;<br />
}<br />
.nav a {<br />
position:relative;<br />
display:inline-block;<br />
width:300px;<br />
background:#9C3;<br />
height:25px;<br />
}<br />
.nav ul {<br />
float:left;<br />
}<br />
.sub li {<br />
clear:left;<br />
position:relative;<br />
}<br />
.sub li a {<br />
margin-right:-1px;<br />
}<br />
<br />
a.main, .sub a.submain {<br />
height:25px;<br />
background:yellow;<br />
float:left;<br />
margin-right:-299px;<br />
margin-top:10000px;<br />
}<br />
<br />
<br />
.subs {<br />
visibility:hidden;<br />
height:25px;<br />
top:-10000px;<br />
}<br />
.subs a {<br />
visibility:visible;<br />
}<br />
<br />
.sub ul li {<br />
left:300px;<br />
top:-25px;<br />
}<br />
<br />
<br />
.subs ul a {<br />
background:#CC6;<br />
margin-right:-2px;<br />
}<br />
<br />
<br />
<br />
.nav a:hover,<br />
.nav a:focus,<br />
.nav a:active{<br />
background:orange;<br />
margin-right:0;<br />
}<br />
.subs li a:hover,<br />
.subs li a:focus,<br />
.subs li a:active{<br />
background:#C93;<br />
}<br />
<br />
<br />
<br />
<br />
<br />
/*OPERA fix*/<br />
.sub:hover {<br />
clear:left;<br />
}<br />
.sub ul:hover {<br />
clear:left;<br />
}<br />
<br />
<br />
<br />
<br />
/*multi multilevel*/<br />
.subs .subs {<br />
top:-10025px;<br />
}<br />
.subs .subs ul a {<br />
background:#099;<br />
margin-right:-3px;<br />
color:#fff;<br />
}<br />
.subs .subs ul a:hover,<br />
.subs .subs ul a:focus,<br />
.subs .subs ul a:active{<br />
background:#06F;<br />
margin-right:0;<br />
}<br />
<br />
</style><br />
<!--[if IE 7]><br />
<style type="text/css"><br />
.subs {<br />
visibility:visible;<br />
min-width:299px;<br />
}<br />
<br />
/*multi multilevel*/<br />
.subs .subs {<br />
min-width:298px;<br />
}<br />
</style><br />
<![endif]--><br />
<!--[if lte IE 6]><br />
<style type="text/css"><br />
.subs {<br />
width:299px;<br />
height:20025px;/*10000 + 10000 + 25*/<br />
<br />
margin-top:-10000px;<br />
margin-bottom:-10000px;<br />
<br />
position:relative;<br />
top:-20000px;/*10000 + 10000*/<br />
visibility:visible;<br />
}<br />
.subs a.submain, .subs ul li {<br />
position:relative;<br />
top:20000px;/*10000 + 10000*/<br />
}<br />
.subs ul li {<br />
top:19975px;/*10000 + 10000 - 25*/<br />
}<br />
<br />
/*multi multilevel*/<br />
.subs .subs {<br />
top:-25px;<br />
width:298px;<br />
}<br />
</style><br />
<![endif]--><br />
</head><br />
<br />
<body><br />
<div style="position:relative;z-index:1;"><a href="#background1">background 1</a></div><br />
<div id="navigation"><br />
<ul class="nav"><br />
<li class="link"><br />
<a class="main" href="#">Main</a><br />
<ul class="sub"><br />
<li><a href="#1">test1</a></li><br />
<li><a href="#2">test2</a></li><br />
<li class="subs"><a class="submain" href="#2">test2</a><br />
<ul><br />
<li><a href="#subtest1">sub test 1</a></li><br />
<li><a href="#subtest2">sub test 2</a></li><br />
<li><a href="#subtest3">sub test 3</a></li><br />
<li><a href="#subtest4">sub test 4</a></li><br />
<li><a href="#subtest5">sub test 5</a></li><br />
<li><a href="#subtest6">sub test 6</a></li><br />
</ul><br />
</li><br />
<li><a href="#3">test3</a></li><br />
<li class="subs"><a class="submain" href="#4">test4</a><br />
<ul><br />
<li><a href="#subtest1">sub test 1</a></li><br />
<li><a href="#subtest2">sub test 2</a></li><br />
<li><a href="#subtest3">sub test 3</a></li><br />
<li><a href="#subtest4">sub test 4</a></li><br />
<li><a href="#subtest5">sub test 5</a></li><br />
<li><a href="#subtest6">sub test 6</a></li><br />
</ul><br />
</li><br />
<li><a href="#5">test5</a></li><br />
<li><a href="#6">test6</a></li><br />
<li><a href="#7">test7</a></li><br />
<li><a href="#8">test8</a></li><br />
<li class="subs"><a class="submain" href="#9">Everything is possible</a><br />
<ul><br />
<li><a href="#subtest1">sub test 1</a></li><br />
<li><a href="#subtest2">sub test 2</a></li><br />
<li><a href="#subtest3">sub test 3</a></li><br />
<li class="subs"><a class="submain" href="#sub4">SUB test4</a><br />
<ul><br />
<li><a href="#subtest1">sub sub test 1</a></li><br />
<li><a href="#subtest2">sub sub test 2</a></li><br />
<li><a href="#subtest3">sub sub test 3</a></li><br />
<li><a href="#subtest4">sub sub test 4</a></li><br />
<li><a href="#subtest5">sub sub test 5</a></li><br />
<li><a href="#subtest6">sub sub test 6</a></li><br />
</ul><br />
</li><br />
<li><a href="#subtest5">sub test 5</a></li><br />
<li><a href="#subtest6">sub test 6</a></li><br />
<li class="subs"><a class="submain" href="#sub7">SUB test7</a><br />
<ul><br />
<li><a href="#subtest1">sub sub test 1</a></li><br />
<li><a href="#subtest2">sub sub test 2</a></li><br />
<li><a href="#subtest3">sub sub test 3</a></li><br />
<li><a href="#subtest4">sub sub test 4</a></li><br />
<li><a href="#subtest5">sub sub test 5</a></li><br />
<li><a href="#subtest6">sub sub test 6</a></li><br />
</ul><br />
</li><br />
</ul><br />
</li><br />
</ul><br />
</li><br />
<li class="link"><br />
<a class="main" href="#">Main</a><br />
<ul class="sub"><br />
<li><a href="#1">test1</a></li><br />
<li><a href="#2">test2</a></li><br />
<li><a href="#3">test3</a></li><br />
<li><a href="#4">test4</a></li><br />
<li><a href="#5">test5</a></li><br />
<li><a href="#6">test6</a></li><br />
<li><a href="#7">test7</a></li><br />
</ul><br />
</li><br />
<li class="link"><br />
<a class="main" href="#">Main</a><br />
<ul class="sub"><br />
<li><a href="#1">test1</a></li><br />
<li><a href="#2">test2</a></li><br />
<li><a href="#3">test3</a></li><br />
<li class="subs"><a class="submain" href="#4">test4</a><br />
<ul><br />
<li><a href="#subtest1">sub test 1</a></li><br />
<li><a href="#subtest2">sub test 2</a></li><br />
<li><a href="#subtest3">sub test 3</a></li><br />
<li><a href="#subtest4">sub test 4</a></li><br />
<li><a href="#subtest5">sub test 5</a></li><br />
<li><a href="#subtest6">sub test 6</a></li><br />
</ul><br />
</li><br />
<li><a href="#5">test5</a></li><br />
<li><a href="#6">test6</a></li><br />
<li class="subs"><a class="submain" href="#7">test7</a><br />
<ul><br />
<li><a href="#subtest1">sub2 test 1</a></li><br />
<li><a href="#subtest2">sub2 test 2</a></li><br />
<li><a href="#subtest3">sub2 test 3</a></li><br />
<li><a href="#subtest4">sub2 test 4</a></li><br />
<li><a href="#subtest5">sub2 test 5</a></li><br />
<li><a href="#subtest6">sub2 test 6</a></li><br />
</ul><br />
</li><br />
</ul><br />
</li><br />
</ul><br />
</div><br />
<div><a href="#background2">background 2</a></div><br />
</body><br />
</html>
</code>
</div>
<h3 style="font-size: 1em;">
The Multilevel dropdown was kindly simplified by <a href="http://dev.moonhenge.net/">Anton P:</a></h3>
<div style="border: solid #000 1px; height: 400px; margin-bottom: 50px; overflow: scroll; position: relative; white-space: nowrap; width: 600px;">
<code>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"<br />
"http://www.w3.org/TR/html4/strict.dtd"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><br />
<title></title><br />
<style type="text/css"><br />
#navigation {<br />
background: #ccc;<br />
height: 25px;<br />
}<br />
<br />
ul {<br />
list-style: none;<br />
margin: 0;<br />
padding: 0<br />
}<br />
<br />
#navigation a {<br />
text-decoration: none;<br />
color: #000;<br />
}<br />
<br />
<br />
/***** ALL LEVELS *****/<br />
<br />
ul.nav li {<br />
zoom: 1;<br />
}<br />
<br />
ul.nav a {<br />
position: relative;<br />
display: block;<br />
width: 150px;<br />
margin-right: -149px;<br />
height: 25px;<br />
}<br />
ul.nav a:hover,<br />
ul.nav a:focus,<br />
ul.nav a:active {<br />
margin-right: 0;<br />
}<br />
<br />
ul.nav a.main {<br />
float: left; _display: inline;<br />
margin-top: 10000px; /* (2) bring back onscreen */<br />
}<br />
<br />
<br />
/***** LEVEL 1 *****/<br />
<br />
ul.nav li.link {<br />
float: left; _display: inline;<br />
width: 150px;<br />
margin-top: -10000px; /* (1) set offscreen distance */<br />
}<br />
<br />
ul.nav li.link a {<br />
background: transparent; /* enables persistent background */<br />
}<br />
ul.nav li.link a:hover,<br />
ul.nav li.link a:focus,<br />
ul.nav li.link a:active {<br />
background: yellow;<br />
}<br />
<br />
<br />
/***** LEVEL 2 AND BELOW *****/<br />
<br />
ul.nav ul.sub {<br />
background: green; /* provides persistent background for parent A */<br />
float: left; /* display:inline breaks IE6 here */<br />
margin-top: -25px;<br />
padding-top: 25px;<br />
margin-bottom: -5000px; /* (4) avoid interaction with subsequent page elements */<br />
/* any sufficiently large amount, but Opera has low upper limits */<br />
}<br />
ul.nav ul.sub:hover {<br />
clear: both; /* Opera fix for A:hover background colours */<br />
}<br />
<br />
ul.nav ul.sub li {<br />
clear: left; /* must clear any immediately preceding LI.has-sub */<br />
}<br />
ul.nav ul.sub li.has-sub {<br />
float: left; _display: inline;<br />
_clear: none; /* (5) don't clear any immediately preceding LI.has-sub in IE6 since clearing is not necessary anyway in this browser,<br />
* and doing so on an LI.has-sub causes breakage when there are at least two consecutive submenu items both with subsubmenus;<br />
* however, we keep the clear on other LIs to work around another bug in which, whenever the first item of a submenu is an<br />
* li.has-sub with clear:none and the second item is a normal LI, a one-item-high vertical gap appears before normal LI<br />
* unless it has clear:left */<br />
margin-top: -10000px; /* (1) set offscreen distance */<br />
height: 25px; /* height of child A... */<br />
height: 10025px; /* (3) ...which IE6 expands by 10000 to enclose its child A */<br />
}<br />
<br />
ul.nav ul.sub a {<br />
background: #ddd;<br />
}<br />
ul.nav ul.sub a:hover,<br />
ul.nav ul.sub a:focus,<br />
ul.nav ul.sub a:active {<br />
background: yellow;<br />
}<br />
<br />
<br />
/***** LEVEL 3 and below *****/<br />
<br />
ul.nav ul.sub ul.sub {<br />
position: relative;<br />
left: 150px;<br />
padding-top: 0;<br />
}<br />
ul.nav li.last-child ul.sub ul.sub {<br />
left: auto;<br />
right: 150px; /* optionally reverse the submenu direction for the rightmost main menu item */<br />
}<br />
<br />
</style><br />
<!--[if IE 7]><br />
<style type="text/css"><br />
ul.nav ul.sub li.has-sub:hover ~ li ul {<br />
display: none; /* (6) prevents breakage in IE7 when there are at least two consecutive submenu items both with subsubmenus */<br />
}<br />
ul.nav ul.sub li.has-sub:hover ul {<br />
display: block;<br />
}<br />
ul.nav ul.sub li.has-sub ul {<br />
z-index: 2; /* (6) see above; alas the fix won't work with :active, but at least we can ensure that menu is visible with keyboard navigation */<br />
}<br />
ul.nav ul.sub li.has-sub ~ li ul {<br />
z-index: 1; /* (6) see above */<br />
}<br />
</style><br />
<!--IE7 fullfix using js--><br />
<script type="text/javascript"><br />
window.onload = function() {<br />
/*@cc_on<br />
@if (@_jscript_version == 5.7)<br />
if (typeof document.body.style.maxHeight != "undefined") { //IE7<br />
//Define getElementsByClassName for IE<8<br />
function walkTheDOM (node, func) {<br />
func(node);<br />
node = node.firstChild;<br />
while (node) {<br />
walkTheDOM(node, func);<br />
node = node.nextSibling;<br />
}<br />
}<br />
function getElementsByClassName(el, className) {<br />
var results = [];<br />
walkTheDOM(el, function (node) {<br />
var a, c = node.className, i;<br />
if (c) {<br />
a = c.split(' ');<br />
for (i=0; i<a.length; i++) {<br />
if (a[i] === className) {<br />
results.push(node);<br />
break;<br />
}<br />
}<br />
}<br />
});<br />
return results;<br />
}<br />
<br />
// For an element el which is the A child of an li.has-sub, this function finds all following sibling LIs of<br />
// that li.has-sub and sets their child UL, if it exists, to display:none while setting the child UL of li.has-sub<br />
// to display:block<br />
var fixSubmenuDisplay = function(el) {<br />
var siblings = el.parentNode.parentNode.childNodes;<br />
var elParentFound = false;<br />
var siblingChildren;<br />
for (var j=0; j<siblings.length; ++j) {<br />
if (!elParentFound && siblings[j].nodeType == 1 && siblings[j].tagName == "LI" && siblings[j] == el.parentNode) {<br />
elParentFound = true;<br />
}<br />
if (elParentFound) {<br />
siblingChildren = siblings[j].childNodes;<br />
for (var k=0; k<siblingChildren.length; ++k) {<br />
if (siblingChildren[k].nodeType == 1 && siblingChildren[k].tagName == "UL") {<br />
if (siblings[j] == el.parentNode) {<br />
siblingChildren[k].style.display = "block";<br />
} else {<br />
siblingChildren[k].style.display = "none";<br />
}<br />
}<br />
}<br />
}<br />
}<br />
}<br />
<br />
// For an A child of an li.has-sub, sets the onfocus and onmouseover event to call the fixSubmenuDisplay function<br />
var nav = document.getElementById("navigation");<br />
var hasSubs = getElementsByClassName(nav, "has-sub");<br />
var children;<br />
var aChild;<br />
for (var i=0; i<hasSubs.length; ++i) {<br />
children = hasSubs[i].childNodes;<br />
for (var j=0; j<children.length; ++j) {<br />
if (children[j].nodeType == 1 && children[j].tagName == "A") {<br />
aChild = children[j];<br />
break;<br />
}<br />
}<br />
aChild.onfocus = function() {<br />
fixSubmenuDisplay(this);<br />
}<br />
aChild.onmouseover = function() {<br />
fixSubmenuDisplay(this);<br />
}<br />
}<br />
}<br />
@end<br />
@*/<br />
}<br />
</script><br />
<![endif]--><br />
<br />
</head><br />
<body><br />
<div class="outer"><br />
<div class="header"><br />
<p>Jfkd fjd jf <a href="#background1">background 2</a> jfkd jfldj fdsl. Jfkd fjd jf <a href="#background1">background 2</a> jfkd jfldj fdsl. Jfkd fjd jf <a href="#background1">background 2</a> jfkd jfldj fdsl. Jfkd fjd jf <a href="#background1">background 2</a> jfkd jfldj fdsl. Jfkd fjd jf <a href="#background1">background 2</a> jfkd jfldj fdsl. Jfkd fjd jf <a href="#background1">background 2</a> jfkd jfldj fdsl. Jfkd fjd jf <a href="#background1">background 2</a> jfkd jfldj fdsl. Jfkd fjd jf <a href="#background1">background 2</a> jfkd jfldj fdsl. Jfkd fjd jf <a href="#background1">background 2</a> jfkd jfldj fdsl. Jfkd fjd jf <a href="#background1">background 2</a> jfkd jfldj fdsl. Jfkd fjd jf <a href="#background1">background 2</a> jfkd jfldj fdsl. Jfkd fjd jf <a href="#background1">background 2</a></p><br />
</div><br />
<div id="navigation"><br />
<ul class="nav"><br />
<li class="link"> <a class="main" href="#">Main</a><br />
<ul class="sub"><br />
<li><a href="#">test1</a></li><br />
<li><a href="#">test2</a></li><br />
<li class="has-sub"> <a class="main" href="#">Sub menu »</a><br />
<ul class="sub"><br />
<li><a href="#">sub test1</a></li><br />
<li><a href="#">sub test2</a></li><br />
<li class="has-sub"> <a class="main" href="#">Sub menu »</a><br />
<ul class="sub"><br />
<li><a href="#">sub test1</a></li><br />
<li><a href="#">sub test2</a></li><br />
<li><a href="#">sub test3</a></li><br />
<li><a href="#">sub test4</a></li><br />
</ul><br />
</li><br />
<li><a href="#">sub test3</a></li><br />
<li><a href="#">sub test4</a></li><br />
<li class="has-sub"> <a class="main" href="#">Sub menu »</a><br />
<ul class="sub"><br />
<li><a href="#">sub test1</a></li><br />
<li><a href="#">sub test2</a></li><br />
<li><a href="#">sub test3</a></li><br />
<li><a href="#">sub test4</a></li><br />
</ul><br />
</li><br />
<li><a href="#">sub test5</a></li><br />
<li><a href="#">sub test6</a></li><br />
</ul><br />
</li><br />
<li class="has-sub"> <a class="main" href="#">Sub menu »</a><br />
<ul class="sub"><br />
<li><a href="#">sub test1</a></li><br />
<li><a href="#">sub test2</a></li><br />
<li class="has-sub"> <a class="main" href="#">Sub menu »</a><br />
<ul class="sub"><br />
<li><a href="#">sub test1</a></li><br />
<li><a href="#">sub test2</a></li><br />
<li><a href="#">sub test3</a></li><br />
<li><a href="#">sub test4</a></li><br />
</ul><br />
</li><br />
<li><a href="#">sub test3</a></li><br />
<li><a href="#">sub test4</a></li><br />
<li class="has-sub"> <a class="main" href="#">Sub menu »</a><br />
<ul class="sub"><br />
<li><a href="#">sub test1</a></li><br />
<li><a href="#">sub test2</a></li><br />
<li><a href="#">sub test3</a></li><br />
<li><a href="#">sub test4</a></li><br />
</ul><br />
</li><br />
<li><a href="#">sub test5</a></li><br />
<li><a href="#">sub test6</a></li><br />
</ul><br />
</li><br />
<li class="has-sub"> <a class="main" href="#">Sub menu »</a><br />
<ul class="sub"><br />
<li><a href="#">sub test1</a></li><br />
<li><a href="#">sub test2</a></li><br />
<li class="has-sub"> <a class="main" href="#">Sub menu »</a><br />
<ul class="sub"><br />
<li><a href="#">sub test1</a></li><br />
<li><a href="#">sub test2</a></li><br />
<li><a href="#">sub test3</a></li><br />
<li><a href="#">sub test4</a></li><br />
</ul><br />
</li><br />
<li><a href="#">sub test3</a></li><br />
<li><a href="#">sub test4</a></li><br />
<li class="has-sub"> <a class="main" href="#">Sub menu »</a><br />
<ul class="sub"><br />
<li><a href="#">sub test1</a></li><br />
<li><a href="#">sub test2</a></li><br />
<li><a href="#">sub test3</a></li><br />
<li><a href="#">sub test4</a></li><br />
</ul><br />
</li><br />
<li><a href="#">sub test5</a></li><br />
<li><a href="#">sub test6</a></li><br />
</ul><br />
</li><br />
<li class="has-sub"> <a class="main" href="#">Sub menu »</a><br />
<ul class="sub"><br />
<li><a href="#">sub test1</a></li><br />
<li><a href="#">sub test2</a></li><br />
<li class="has-sub"> <a class="main" href="#">Sub menu »</a><br />
<ul class="sub"><br />
<li><a href="#">sub test1</a></li><br />
<li><a href="#">sub test2</a></li><br />
<li><a href="#">sub test3</a></li><br />
<li><a href="#">sub test4</a></li><br />
</ul><br />
</li><br />
<li><a href="#">sub test3</a></li><br />
<li><a href="#">sub test4</a></li><br />
<li class="has-sub"> <a class="main" href="#">Sub menu »</a><br />
<ul class="sub"><br />
<li><a href="#">sub test1</a></li><br />
<li><a href="#">sub test2</a></li><br />
<li><a href="#">sub test3</a></li><br />
<li><a href="#">sub test4</a></li><br />
</ul><br />
</li><br />
<li><a href="#">sub test5</a></li><br />
<li><a href="#">sub test6</a></li><br />
</ul><br />
</li><br />
<li><a href="#">test3</a></li><br />
<li><a href="#">test4</a></li><br />
</ul><br />
</li><br />
<li class="link"> <a class="main" href="#">Main</a><br />
<ul class="sub"><br />
<li><a href="#">test1</a></li><br />
<li><a href="#">test2</a></li><br />
<li><a href="#">test3</a></li><br />
<li><a href="#">test4</a></li><br />
</ul><br />
</li><br />
<li class="link"> <a class="main" href="#">Main</a><br />
<ul class="sub"><br />
<li><a href="#">sub test1</a></li><br />
<li><a href="#">sub test2</a></li><br />
<li class="has-sub"> <a class="main" href="#">Sub menu »</a><br />
<ul class="sub"><br />
<li><a href="#">sub test1</a></li><br />
<li><a href="#">sub test2</a></li><br />
<li><a href="#">sub test3</a></li><br />
<li><a href="#">sub test4</a></li><br />
</ul><br />
</li><br />
<li><a href="#">sub test3</a></li><br />
<li><a href="#">sub test4</a></li><br />
<li class="has-sub"> <a class="main" href="#">Sub menu »</a><br />
<ul class="sub"><br />
<li><a href="#">sub test1</a></li><br />
<li><a href="#">sub test2</a></li><br />
<li><a href="#">sub test3</a></li><br />
<li><a href="#">sub test4</a></li><br />
</ul><br />
</li><br />
<li><a href="#">sub test5</a></li><br />
<li><a href="#">sub test6</a></li><br />
</ul><br />
</li><br />
<li class="link last-child"> <a class="main" href="#">Main</a><br />
<ul class="sub"><br />
<li class="has-sub"> <a class="main" href="#">Sub menu »</a><br />
<ul class="sub"><br />
<li class="has-sub"> <a class="main" href="#">Sub menu »</a><br />
<ul class="sub"><br />
<li><a href="#">sub test1</a></li><br />
<li><a href="#">sub test2</a></li><br />
<li><a href="#">sub test3</a></li><br />
<li><a href="#">sub test4</a></li><br />
</ul><br />
</li><br />
<li><a href="#">sub test1</a></li><br />
<li class="has-sub"> <a class="main" href="#">Sub menu »</a><br />
<ul class="sub"><br />
<li><a href="#">sub test1</a></li><br />
<li><a href="#">sub test2</a></li><br />
<li><a href="#">sub test3</a></li><br />
<li><a href="#">sub test4</a></li><br />
</ul><br />
</li><br />
<li><a href="#">sub test2</a></li><br />
</ul><br />
</li><br />
<li><a href="#">test1</a></li><br />
<li class="has-sub"> <a class="main" href="#">Sub menu »</a><br />
<ul class="sub"><br />
<li class="has-sub"> <a class="main" href="#">Sub menu »</a><br />
<ul class="sub"><br />
<li><a href="#">sub test1</a></li><br />
<li><a href="#">sub test2</a></li><br />
<li><a href="#">sub test3</a></li><br />
<li><a href="#">sub test4</a></li><br />
</ul><br />
</li><br />
<li><a href="#">sub test1</a></li><br />
<li class="has-sub"> <a class="main" href="#">Sub menu »</a><br />
<ul class="sub"><br />
<li><a href="#">sub test1</a></li><br />
<li><a href="#">sub test2</a></li><br />
<li><a href="#">sub test3</a></li><br />
<li><a href="#">sub test4</a></li><br />
</ul><br />
</li><br />
<li><a href="#">sub test2</a></li><br />
</ul><br />
</li><br />
<li><a href="#">test2</a></li><br />
</ul><br />
</li><br />
</ul><br />
</div><br />
<p>Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl. Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl. Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl. Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl. Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl. Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl. Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl. Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl. Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl. Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl. Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl. Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl. Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl. Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl. Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl. Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl. Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl. Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl. Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl. Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl. Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl. Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl. Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl. Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl. Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl. Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl. Jfkd fjd jf <a href="#background2">background 2</a> jfkd jfldj fdsl.</p><br />
</div><br />
</body><br />
</html>
</code>
</div>
<h3 style="font-size: 1em;">
Update</h3>
Anton P, improved his method even more after discovering a bug in IE6, the bug is still partially present in IE7, but only for :active link states.
<br />
<br />
<h3 style="font-size: 1em;">
Update2 (2009.11.04)</h3>
I have made a much improved version, using some of Anton P's tricks.
I made it specifically with customization in mind, please read its comments to know what each part does.
<br />
<h3 style="font-size: 1em;">
Update3 (2009.12.10)</h3>
I have reduced the amount of IE5-7 fixes to a bare minimum: .nav .sub {width:99%;}.<br />
<h3 style="font-size: 1em;">
Update4 (2009.12.23)</h3>
I have removed any IE conditional comments, the IE fix is now: .nav .sub {width:100%;}, but it is harmless for normal browsers.<br />
Enjoy :)
<br /><br />
<div style="border: solid #000 1px; height: 400px; margin-bottom: 50px; overflow: scroll; position: relative; white-space: nowrap; width: 600px;">
<code>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>TH - CSS Only Multilevel Dropdown</title><br />
<style type="text/css"><br />
/***reset default styling***/<br />
.nav,<br />
.nav ul{<br />
list-style-type:none;<br />
margin:0;<br />
padding:0;<br />
}<br />
.nav a {<br />
text-decoration:none;<br />
}<br />
/*CUSTOMIZATION*/<br />
/*i have split the code to have the width/height/color separate from the rest of the code*/<br />
/*COLORS*/<br />
/*here are some default colors, funky colors used for distinctive visibility*/<br />
/*i hope that you can handle colors customization on your own :p*/<br />
.nav {<br />
background:yellow;<br />
}<br />
.nav a {<br />
background:#9C3;<br />
color:#000;<br />
}<br />
.nav ul {<br />
background:red;/*top link persistent background color*/<br />
}<br />
.nav a.main {<br />
background:transparent;/*so that the top link persistent background works*/<br />
}<br />
.nav ul a.main {<br />
background:yellow;<br />
}<br />
.nav a.main:hover {<br />
background:orange;<br />
}<br />
.nav .sub ul a {<br />
background:#CC6;<br />
}<br />
.nav .sub ul a.main {<br />
background:yellow;<br />
}<br />
.nav .sub ul a.main:hover {<br />
background:orange;<br />
}<br />
.nav a:hover,<br />
.nav a:focus,<br />
.nav a:active{<br />
background:orange;<br />
}<br />
.nav .sub li a:hover,<br />
.nav .sub li a:focus,<br />
.nav .sub li a:active{<br />
background:#C93;<br />
}<br />
.nav .sub .sub ul a {<br />
background:#099;<br />
color:#fff;<br />
}<br />
.nav .sub .sub ul a:hover,<br />
.nav .sub .sub ul a:focus,<br />
.nav .sub .sub ul a:active{<br />
background:#06F;<br />
}<br />
.nav .sub .sub .sub ul a {<br />
background:#036;<br />
}<br />
.nav .sub .sub .sub ul a:hover,<br />
.nav .sub .sub .sub ul a:focus,<br />
.nav .sub .sub .sub ul a:active{<br />
background:#006;<br />
}<br />
.nav .colored li a {<br />
background:purple;<br />
}<br />
<br />
<br />
<br />
/*HEIGHT*/<br />
.nav {<br />
height:1.563em;/*you could remove this and clear the float differently, but to me this makes the most sense*/<br />
}<br />
.nav a {<br />
padding:.2em 0;/*apply padding to links, to vertically center them, be careful with horizontal padding in IE5, correct width must be maintained*/<br />
}<br />
.nav a.main {<br />
height:1.563em;/*needs to be the same as the persistent background trick and so that the sublevels are properly aligned*/<br />
line-height:1.563em;/*not really necessary, but in this specific case it vertically centers the main link text*/<br />
overflow:hidden;/*making it more bulletproof*/<br />
padding:0;/*remove the padding that was applied above*/<br />
}<br />
.nav ul {<br />
padding-top:1.563em;/*persistent background trick*/<br />
margin-top:-1.563em;/*persistent background trick*/<br />
}<br />
.nav ul ul {<br />
position:relative;/*so that it can be moved top/left*/<br />
top:-1.563em;/*this is the sole reason why the main links must have a fixed height*/<br />
}<br />
<br />
<br />
/*WIDTH (!IMPORTANT)*/<br />
/*change each width value below, else the dropdown will stop working (:hover will still work in modern browsers because of the opera fix)*/<br />
/*set the link width here*/<br />
.nav .link, <br />
.nav a {<br />
width:9em;/*same as width*/<br />
}<br />
.nav ul li {<br />
/*force ie8 to float-drop*/<br />
max-width:9em;/*same as width*/<br />
}<br />
/*set the sublink left shift width here (same as width)*/<br />
.nav ul ul {<br />
/*move the sublinks to the side, so they dont overlap*/<br />
left:9em;/*same as width*/<br />
}<br />
.nav li.reversed ul {/*reverse the direction of sublinks for the last dropdown*/<br />
left:auto;<br />
right:9em;/*same as width*/<br />
}<br />
/*add the negative value of "width - 1px" here (because css can't do math)*/<br />
/*or (width - 0.063em) where 0.063em is 1px on 16px base size*/<br />
.nav a {<br />
/*makes the links very thin, so that the sublinks can hide inside the main link*/<br />
margin-right:-8.937em;/*make this width - 1px*//*or width - 0.063em*/<br />
}<br />
<br />
<br />
/*Dropper Dropdown*/<br />
/*supports up to 4 sub-levels in IE5-7, more can be added*/<br />
/*modern browsers already support any amount of sublevels*/<br />
/*made by Timo Huovinen*/<br />
<br />
.nav li {<br />
float:left;/*fixes several IE related bugs, and allows for clearing*/<br />
}<br />
.nav ul {<br />
float:left;/*necessary for float drop*/<br />
}<br />
.nav ul li {<br />
clear:left;/*must clear the floated list item inside sublist*/<br />
}<br />
.nav a {<br />
position:relative;/*needs to have a position, to be above the rest*/<br />
display:block;<br />
}<br />
.nav a.main {<br />
float:left;/*necessary for float drop*/<br />
margin-top:10000px;/*bring the links back into view*/<br />
}<br />
.nav .link,<br />
.nav .sub {<br />
margin-top:-10000px;/*hide the links and their containers, opera has low upper limits*/<br />
}<br />
.nav ul {<br />
margin-bottom:-5000px;/*avoid any interaction between the sub's, can be any large size*/<br />
}<br />
/*the main trick, removes the negative right-margin and causes float drop*/<br />
.nav a:hover,<br />
.nav a:focus,<br />
.nav a:active{<br />
margin-right:0;<br />
}<br />
<br />
/*OPERA fix*/<br />
.nav ul:hover,<br />
.nav ul ul:hover {<br />
clear:left;/*fix for opera sublinks flickering on :hover*/<br />
}<br />
/*background no longer needed*/<br />
.nav ul ul {<br />
background:transparent;<br />
}<br />
<br />
<br />
/*IE5-6 + 7 bug fixes*/<br />
.nav .sub {<br />
width:100%;<br />
}<br />
/*empty rule to fix occassional IE6 tabbing bug, one of the weirdest bug's i have seen.<br />
it seems that this indexes the links together as one? does not happen for everyone, but im leaving it just in case.*/<br />
a, a:hover, a:active, a:focus {}<br />
</style><br />
<!--I would also suggest adding some javascript to delay the closing of the sublinks, just to make it even better--><br />
</head><br />
<body><br />
<a href="#background1">background 1</a><br />
<ul class="nav"><br />
<li class="link"><br />
<a class="main" href="#">Main</a><br />
<ul><br />
<li><a href="#1">test1</a></li><br />
<li><a href="#2">test2</a></li><br />
<li class="sub"><a class="main" href="#3">main 1 »</a><br />
<ul class="colored"><br />
<li><a href="#subtest1">sub test 1</a></li><br />
<li><a href="#subtest2">sub test 2</a></li><br />
<li><a href="#subtest3">sub test 3</a></li><br />
<li><a href="#subtest4">sub test 4</a></li><br />
<li class="sub"><a class="main" href="#sub4">SUB main 1 »</a><br />
<ul><br />
<li><a href="#subtest1">sub sub test 1</a></li><br />
<li><a href="#subtest2">sub sub test 2</a></li><br />
<li><a href="#subtest3">sub sub test 3</a></li><br />
<li><a href="#subtest4">sub sub test 4</a></li><br />
<li><a href="#subtest5">sub sub test 5</a></li><br />
<li><a href="#subtest6">sub sub test 6</a></li><br />
</ul><br />
</li><br />
<li><a href="#subtest5">sub test 5</a></li><br />
<li><a href="#subtest6">sub test 6</a></li><br />
</ul><br />
</li><br />
<li class="sub"><a class="main" href="#4">main 2 »</a><br />
<ul><br />
<li class="sub"><a class="main" href="#sub4">SUB main 2 »</a><br />
<ul><br />
<li><a href="#subtest1">sub sub test 1</a></li><br />
<li><a href="#subtest2">sub sub test 2</a></li><br />
<li><a href="#subtest3">sub sub test 3</a></li><br />
<li><a href="#subtest4">sub sub test 4</a></li><br />
<li><a href="#subtest5">sub sub test 5</a></li><br />
<li><a href="#subtest6">sub sub test 6</a></li><br />
</ul><br />
</li><br />
<li><a href="#subtest1">sub test 1</a></li><br />
<li><a href="#subtest2">sub test 2</a></li><br />
<li><a href="#subtest3">sub test 3</a></li><br />
<li><a href="#subtest4">sub test 4</a></li><br />
<li><a href="#subtest5">sub test 5</a></li><br />
<li><a href="#subtest6">sub test 6</a></li><br />
</ul><br />
</li><br />
<li><a href="#5">test5</a></li><br />
<li><a href="#6">test6</a></li><br />
<li><a href="#7">long text link showing what happens</a></li><br />
<li><a href="#8">test8</a></li><br />
<li class="sub"><a class="main" href="#9">Everything is possible</a><br />
<ul><br />
<li><a href="#subtest1">sub test 1</a></li><br />
<li><a href="#subtest2">sub test 2</a></li><br />
<li><a href="#subtest3">sub test 3</a></li><br />
<li class="sub"><a class="main" href="#sub4">SUB test4 »</a><br />
<ul><br />
<li><a href="#subtest1">sub sub test 1</a></li><br />
<li><a href="#subtest2">sub sub test 2</a></li><br />
<li><a href="#subtest3">sub sub test 3</a></li><br />
<li class="sub"><a class="main" href="#sub7">Ultra SUB test7 »</a><br />
<ul><br />
<li><a href="#subtest1">sub sub test 1</a></li><br />
<li><a href="#subtest2">sub sub test 2</a></li><br />
<li><a href="#subtest3">sub sub test 3</a></li><br />
<li><a href="#subtest4">sub sub test 4</a></li><br />
<li><a href="#subtest5">sub sub test 5</a></li><br />
<li><a href="#subtest6">sub sub test 6</a></li><br />
</ul><br />
</li><br />
<li class="sub"><a class="main" href="#sub7">Ultra SUB test8 »</a><br />
<ul><br />
<li><a href="#subtest1">sub sub test 1</a></li><br />
<li><a href="#subtest2">sub sub test 2</a></li><br />
<li><a href="#subtest3">sub sub test 3</a></li><br />
<li><a href="#subtest4">sub sub test 4</a></li><br />
<li><a href="#subtest5">sub sub test 5</a></li><br />
<li><a href="#subtest6">sub sub test 6</a></li><br />
</ul><br />
</li><br />
<li><a href="#subtest4">sub sub test 4</a></li><br />
<li><a href="#subtest5">sub sub test 5</a></li><br />
<li><a href="#subtest6">sub sub test 6</a></li><br />
</ul><br />
</li><br />
<li><a href="#subtest5">sub test 5</a></li><br />
<li><a href="#subtest6">sub test 6</a></li><br />
<li class="sub"><a class="main" href="#sub7">SUB test7 »</a><br />
<ul><br />
<li><a href="#subtest1">sub sub test 1</a></li><br />
<li><a href="#subtest2">sub sub test 2</a></li><br />
<li><a href="#subtest3">sub sub test 3</a></li><br />
<li><a href="#subtest4">sub sub test 4</a></li><br />
<li><a href="#subtest5">sub sub test 5</a></li><br />
<li><a href="#subtest6">sub sub test 6</a></li><br />
</ul><br />
</li><br />
<li class="sub"><a class="main" href="#sub7">SUB test7 »</a><br />
<ul><br />
<li><a href="#subtest1">sub sub test 1</a></li><br />
<li><a href="#subtest2">sub sub test 2</a></li><br />
<li><a href="#subtest3">sub sub test 3</a></li><br />
<li><a href="#subtest4">sub sub test 4</a></li><br />
<li><a href="#subtest5">sub sub test 5</a></li><br />
<li><a href="#subtest6">sub sub test 6</a></li><br />
</ul><br />
</li><br />
</ul><br />
</li><br />
</ul><br />
</li><br />
<li class="link"><br />
<a class="main" href="#">Main</a><br />
<ul><br />
<li><a href="#1">test1</a></li><br />
<li><a href="#2">test2</a></li><br />
<li><a href="#3">test3</a></li><br />
<li><a href="#4">test4</a></li><br />
<li><a href="#5">test5</a></li><br />
<li><a href="#6">test6</a></li><br />
<li><a href="#7">test7</a></li><br />
</ul><br />
</li><br />
<li class="link reversed"><br />
<a class="main" href="#">Main</a><br />
<ul><br />
<li><a href="#1">test1</a></li><br />
<li><a href="#2">test2</a></li><br />
<li><a href="#3">test3</a></li><br />
<li class="sub"><a class="main" href="#4">test4 »</a><br />
<ul><br />
<li><a href="#subtest1">sub test 1</a></li><br />
<li><a href="#subtest2">sub test 2</a></li><br />
<li><a href="#subtest3">sub test 3</a></li><br />
<li><a href="#subtest4">sub test 4</a></li><br />
<li><a href="#subtest5">sub test 5</a></li><br />
<li><a href="#subtest6">sub test 6</a></li><br />
</ul><br />
</li><br />
<li><a href="#5">test5</a></li><br />
<li><a href="#6">test6</a></li><br />
<li class="sub"><a class="main" href="#7">test7 »</a><br />
<ul><br />
<li><a href="#subtest1">sub2 test 1</a></li><br />
<li><a href="#subtest2">sub2 test 2</a></li><br />
<li><a href="#subtest3">sub2 test 3</a></li><br />
<li class="sub"><a class="main" href="#sub7">SUB test7 »</a><br />
<ul><br />
<li><a href="#subtest1">sub sub test 1</a></li><br />
<li><a href="#subtest2">sub sub test 2</a></li><br />
<li><a href="#subtest3">sub sub test 3</a></li><br />
<li><a href="#subtest4">sub sub test 4</a></li><br />
<li><a href="#subtest5">sub sub test 5</a></li><br />
<li><a href="#subtest6">sub sub test 6</a></li><br />
</ul><br />
</li><br />
<li><a href="#subtest4">sub2 test 4</a></li><br />
<li><a href="#subtest5">sub2 test 5</a></li><br />
<li><a href="#subtest6">sub2 test 6</a></li><br />
</ul><br />
</li><br />
</ul><br />
</li><br />
</ul><br />
<a href="#background2">background 2</a><br />
</body><br />
</html>
</code>
</div>
<!--end of customizable dropdown code-->
<h3 style="font-size: 1em;">
How it works:</h3>
Same as the <a href="http://thinkhtml.blogspot.com/2009/09/timos-float-drop-css-only-dropdown-menu.html">simplified dropdown</a> but i have nested the dropdowns, now any link hovered withing the dropdown expands, causing a float drop for every level<br />
<h3 style="font-size: 1em;">
Info:</h3>
This dropdown was created because of my hate of javascript based dropdowns.<br />
This dropdown serves to proove that it is indeed possible to create a true css only dropdown.<br />
It took about a month to make the dropdown (from idea to reality), and a week to simplify it with the help of Paul and another week to make it multilevel.<br />
And another several months to reach it's current state.<br />
It was also featured as a quiz on <a href="http://www.sitepoint.com/forums/showthread.php?t=635116">Paul's CSS quizzes</a> on Sitepoint (my forum's alias is YuriKolovsky).
<br />
<h3 style="font-size: 1em;">
Terms of use:</h3>
The software referenced within this license is distributed free of charge and free from any warranty. It may be used freely for any purpose whatsoever. The author created and released this work because he is genuinely a Nice Person!<br />
<br />
Users are encouraged to use, modify, distribute, improve and otherwise manipulate the code. After all, it’s free.<br />
<br />
The author sincerely hopes that end users enjoy and appreciate the hard work that went into creating it, and would appreciate being referenced in future modifications of the code since it was based on the author’s original concept and work.<br />
<br />
Users are nonetheless encouraged to provide reciprocity whenever possible as it provides positive reinforcement and encouragement to the author. Furthermore, the minimum reciprocation I ask is to leave a <b>‘thank you’</b> comment in the area below:
<br />
Timo Huovinenhttp://www.blogger.com/profile/03601349277118301163noreply@blogger.com11tag:blogger.com,1999:blog-4160081393971349871.post-84716567610371091622009-09-20T19:34:00.025+02:002013-10-19T18:35:44.529+02:00Timo's float-drop CSS-only dropdown menu - simplified<h2>
Dropper Dropdown Menu: </h2>
A refined CSS only dropdown menu<br />
<ul>
<li>The worlds most accessible dropdown menu.</li>
<li>It is <b>fixed width</b> for simplification purposes.</li>
<li>It is uses <b>no javascript</b>.</li>
<li>It is uses <b>no extra html</b>.</li>
<li>It is <b>keyboard accessible</b> without javascript.</li>
<li>It is <b>cross-browser</b> (tested in: IE5.5-IE8, Firefox, Opera, Safari(PC) and Google Chrome.).</li>
<li>This menu is <b>valid css/html</b>.</li>
<li>This menu was invented by me, simplified and improved with the help of <a href="http://www.pmob.co.uk/">Paul O'Brien</a>.</li>
</ul>
<h3 style="font-size: 1em;">
more details:</h3>
<ul style="margin-top: 0;">
<li>It uses margins to hide content.</li>
<li>This menu uses <a href="http://www.adobe.com/cfusion/communityengine/index.cfm?event=showdetails&postId=1081&productId=1">float-drop</a> to drop the links into view.</li>
<li>IE6 keyboard tab bug fix provided by <a href="http://www.pmob.co.uk/">Paul O'Brien</a>.</li>
<li>Tip to use tabindex to add "opera keyboard support" given by <a href="http://www.cssplay.co.uk/">Stu Nicholls</a>, now removed as it confused the tabbing order in other browsers.</li>
<li>Tip: to access the links with a keyboard in opera, press Ctrl+Up & Ctrl + Down.</li>
<li>Tip: to access the links with a keyboard in safari4, enable tabbing in preferences/advanced/press tab to highlight each item on webpage.</li>
<li>Max height to hide content is of 303024px (18939em @base 16px) which is the height used on the <a href="http://worlds-highest-website.com/#pos1">worlds highest website</a> although a height of 32767px is the recommended maximum that has been tested to be the max in opera and safari.</li>
<li>Ugly vibrant colors used on purpose.</li>
</ul>
<h3 style="font-size: 1em;">
Demonstration of the Dropdown:</h3>
<h2>
Example</h2>
<div id="dropdownexample" style="margin-bottom: 100px;">
<!-- dropdown start -->
<style type="text/css">
.nav, .nav ul {
list-style-type:none;
margin:0;
padding:0;
}
/*IE5 list fix*/
.nav .sub li {float:left;}
.nav .sub > li {float:none;}
#navigation {
position:relative;
height:25px;
background:#ebebeb;
z-index:10;
}
.nav {
position:absolute;
top:-20000px;/*firefox div transparency fix*/
}
.nav a.main, .nav .sub {
top:20000px;/*firefox div transparency fix*/
}
.nav .link {
width:200px;
margin-top:-10075px;
float:left;
}
.nav a {
position:relative;
display:block;
height:25px;
line-height:25px;
text-decoration:none;
color:#000;
z-index:10;
}
.nav .sub a {
background:orange;
margin:0 -1px 0 0;
width:200px;
}
.nav .sub {
position:relative;
float:left;
background:#F90;
padding-top:25px;
margin-top:-25px;
}
.nav a.main {
width:200px;
height:25px;
line-height:25px;
margin-top:10075px;
margin-right:-199px;
float:left;
}
.nav a.main:hover, .nav a.main:focus, .nav a.main:active {
margin-right:0;
background:#000;
color:#fff;
}
.nav .sub a:hover, .nav .sub a:focus, .nav .sub a:active {
margin:0 0 0 0;
background:#333;
color:#fff;
}
/*empty rule to fix occassional IE6 tabbing bug, one of the weirdest bug's i have seen.*/
a, a:hover, a:active, a:focus {}
/*Opera fix*/
.sub:hover {
clear:both;
}
</style>
<a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#test">test link</a>
<br />
<div id="navigation">
<ul class="nav">
<li class="link"> <a class="main" href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#m1">Main</a>
<ul class="sub">
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#1">test1</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#2">test2</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#3">test3</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#4">test4</a></li>
</ul>
</li>
<li class="link"> <a class="main" href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#m2">Main</a>
<ul class="sub">
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#1">test1</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#2">test2</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#3">test3</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#4">test4</a></li>
</ul>
</li>
</ul>
</div>
<a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#test">test link</a>
<!-- dropdown end -->
</div>
<h3 style="font-size: 1em;">
HTML Code for the full dropdown menu:</h3>
<div style="border: solid #000 1px; height: 400px; margin-bottom: 50px; overflow: scroll; position: relative; white-space: nowrap; width: 600px;">
<code>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>TH - CSS Only Dropdown</title><br />
<style type="text/css"><br />
<br />
.nav, .nav ul {<br />
list-style-type:none;<br />
margin:0;<br />
padding:0;<br />
}<br />
.nav a {<br />
text-decoration:none;<br />
}<br />
/*IE5 list fix*/<br />
.nav .sub li {float:left;}<br />
.nav .sub > li {float:none;}<br />
#navigation {<br />
position:relative;<br />
height:25px;<br />
background:#ebebeb;<br />
z-index:10;<br />
}<br />
.nav {<br />
position:absolute;<br />
visibility:hidden;<br />
}<br />
.nav .link {<br />
width:300px;<br />
margin-top:-10075px;<br />
float:left;<br />
}<br />
.nav a {<br />
position:relative;<br />
display:block;<br />
height:25px;<br />
line-height:25px;<br />
text-decoration:none;<br />
color:#000;<br />
z-index:10;<br />
visibility:visible;<br />
}<br />
.nav .sub a {<br />
background:orange;<br />
margin:0 -1px 0 0;<br />
width:300px;<br />
}<br />
.nav .sub {<br />
float:left;<br />
background:#F90;<br />
padding-top:25px;<br />
margin-top:-25px;<br />
}<br />
.nav a.main {<br />
width:300px;<br />
height:25px;<br />
line-height:25px;<br />
margin-top:10075px;<br />
margin-right:-299px;<br />
float:left;<br />
}<br />
.nav a.main:hover, .nav a.main:focus, .nav a.main:active {<br />
margin-right:0;<br />
background:#000;<br />
color:#fff;<br />
}<br />
.nav .sub a:hover, .nav .sub a:focus, .nav .sub a:active {<br />
margin:0 0 0 0;<br />
background:#333;<br />
color:#fff;<br />
}<br />
/*empty rule to fix occassional IE6 tabbing bug, one of the weirdest bug's i have seen.*/<br />
a, a:hover, a:active, a:focus {}<br />
/*Opera fix*/<br />
.sub:hover {<br />
clear:both;<br />
}<br />
</style><br />
</head><br />
<body><br />
<div id="navigation"><br />
<ul class="nav"><br />
<li class="link"> <a class="main" href="#m1">Main</a><br />
<ul class="sub"><br />
<li><a href="#1">test1</a></li><br />
<li><a href="#2">test2</a></li><br />
<li><a href="#3">test3</a></li><br />
<li><a href="#4">test4</a></li><br />
</ul><br />
</li><br />
<li class="link"> <a class="main" href="#m2">Main</a><br />
<ul class="sub"><br />
<li><a href="#1">test1</a></li><br />
<li><a href="#2">test2</a></li><br />
<li><a href="#3">test3</a></li><br />
<li><a href="#4">test4</a></li><br />
</ul><br />
</li><br />
<li class="link"> <a class="main" href="#m3">Main</a><br />
<ul class="sub"><br />
<li><a href="#1">test1</a></li><br />
<li><a href="#2">test2</a></li><br />
<li><a href="#3">test3</a></li><br />
<li><a href="#4">test4</a></li><br />
</ul><br />
</li><br />
</ul><br />
</div><br />
</body><br />
</html>
</code>
</div>
<h3 style="font-size: 1em;">
How it works (Visual Example):</h3>
<!--How it Works Example-->
<style type="text/css">
.navhiw, .navhiw ul {
list-style-type:none;
margin:0;
padding:0;
}
.navhiw .sub li { float:left;}
.navhiw .sub > li { float:none;}
.howitworks {
position:relative;
height:25px;
background:#ebebeb;
z-index:10;
}
.navhiw {
position:absolute;
}
.navhiw .link {
width:600px;
border:solid green 1px;
overflow:hidden;
padding-bottom:5px;
padding-top:5px;
}
.navhiw a {
position:relative;
display:block;
height:25px;
line-height:25px;
text-decoration:none;
color:#000;
z-index:10;
}
.navhiw .sub li {
clear:left;
}
.navhiw .sub a {
background:orange;
width:294px;
}
.navhiw .sub {
float:left;
margin-left:5px;
border:solid red 1px;
padding:2px;
padding-top:0;
border-top:0;
}
.navhiw a.main {
width:275px;
margin-left:5px;
height:25px;
line-height:25px;
border-top:375px solid #333;
float:left;
color:#fff;
background:#000;
}
.navhiw a.main:hover, .navhiw a.main:focus, .navhiw a.main:active {
width:300px;
}
.navhiw .sub a:hover, .navhiw .sub a:focus, .navhiw .sub a:active {
width:500px;
background:#333;
color:#fff;
}
/*empty rule to fix occassional IE6 tabbing bug, one of the weirdest bug's i have seen.*/
a, a:hover, a:active, a:focus {}
/*Opera fix*/
.sub:hover {
clear:both;
}
</style>
<br />
<div class="howitworks" id="navigation">
<ul class="navhiw">
<li class="link"> <a class="main" href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#m1" tabindex="1">Main</a>
<ul class="sub">
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#1" tabindex="2">test1</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#2" tabindex="3">test2</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#3" tabindex="4">test3</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4160081393971349871#4" tabindex="5">test4</a></li>
</ul>
</li>
</ul>
</div>
<div style="height: 500px; position: relative;">
content : content : content : content : content : content : content : content : content : content : content : content : content : content
: content : content : content : content : content : content : content : content : content : content : content : content
: content : content : content : content : content : content : content : content : content : content : content : content
: content : content : content : content : content : content : content : content : content : content : content : content
: content : content : content : content : content : content : content : content : content : content : content : content
: content : content : content : content : content : content : content : content : content : content : content : content
: content : content : content : content : content : content : content : content : content : content : content : content
: content : content : content : content : content : content : content : content : content : content : content : content
: content : content : content : content : content : content : content : content : content : content : content : content
: content : content : content : content : content : content : content : content : content : content : content : content
: content : content : content : content : content : content : content : content : content : content : content : content
: content : content : content : content : content : content : content : content : content : content : content : content
: content : content : content : content : content : content : content : content : content : content : content : content
: content : content : content : content : content : content : content : content : content : content : content : content
: content : content : content : content : content : content : content : content : content : content : content : content
: content : content : content : content : content : content : content : content : content : content : content : content
: content : content : content : content : content : content : content : content : content : content : content : content
: content : content : content : content : content : content : content : content : content : content : content : content </div>
<!--/How it Works Example-->
The two boxes are floated to the left, if one expands then they both don't fit in the same width making the latter one to drop, thats how float drop is used to achieve the effect, but in the real example we use negative margins to remove 99% of the width, and margin:0 on hover to restore it.<br />
<h3 style="font-size: 1em;">
Info:</h3>
This dropdown was created because of my hate of javascript based dropdowns.<br />
This dropdown serves to proove that it is indeed possible to create a true css only dropdown.<br />
It took about a month to make the dropdown (from idea to reality), and a week to simplify it with the help of Paul.<br />
It was also featured as a quiz on <a href="http://www.sitepoint.com/forums/showthread.php?t=635116">Paul's CSS quizzes</a> on Sitepoint (my forum's alias is YuriKolovsky).
<br />
<h3 style="font-size: 1em;">
Update:</h3>
To add, if you click a blank link (href="#") it will keep the link open, this is actually a good thing as it can simplify the usability, there is also the side effect in some browsers where if you click a link, and then press the back button to return, the dropdown link will remain highlighted, this is a browser feature, and the only known way to remove it, is to remove tabbing (remove the a:active and the a:focus)<br />
<h3 style="font-size: 1em;">
Update2:</h3>
people have been asking how to change the width, here is how:
change from 300 to 150px wide.
<br />
<pre>.nav .sub a {
width:300px;
}
.nav a.main {
margin-right:-299px;
}
to
.nav .sub a {
width:150px;
}
.nav a.main {
margin-right:-149px;
}
</pre>
<h3 style="font-size: 1em;">
Terms of use:</h3>
The software referenced within this license is distributed free of charge and free from any warranty. It may be used freely for any purpose whatsoever. The author created and released this work because he is genuinely a Nice Person!<br />
<br />
Users are encouraged to use, modify, distribute, improve and otherwise manipulate the code. After all, it’s free.<br />
<br />
The author sincerely hopes that end users enjoy and appreciate the hard work that went into creating it, and would appreciate being referenced in future modifications of the code since it was based on the author’s original concept and work.<br />
<br />
Users are nonetheless encouraged to provide reciprocity whenever possible as it provides positive reinforcement and encouragement to the author. Furthermore, the minimum reciprocation I ask is to leave a <b>‘thank you’</b> comment in the area below:
Timo Huovinenhttp://www.blogger.com/profile/03601349277118301163noreply@blogger.com28tag:blogger.com,1999:blog-4160081393971349871.post-13576838422203175072009-08-26T12:24:00.084+02:002013-10-19T18:36:00.587+02:00CSS Only Cross-Browser DropDown menu with tabbing (Valid HTML and Free to use)<h2>
My CSS Only Cross-Browser DropDown Menu (100% valid HTML, Tested in IE5.5-IE8, Firefox, Opera, Chrome, Safari)</h2>
<b>with tab button support and no JavaScript</b>
<br />
<br />
<b>Live Demo</b>
<br />
this demo has no javascript involved at all, neither does it have any ugly tables<br />
<iframe height="400px" src="http://timo.geekcavecreations.com/css-cross-browser-dropdown.html" width="600px">
<p>
Your browser does not support iframes.</p>
</iframe>
<b>Background info</b>
<br />
some months ago i started to work on a major website, that required a dropdown menu, now i can honestly say, i hated dropdown menu's, because they would need javascript to work, sure the usage of IE5-IE6 is no longer that large, especially ie6 users with js turned off, but its still possible, and i do not like the idea of having a critical part of my website not work in my website, so after reading a million posts on the internet saying this is impossible i made it my duty to make it work, after thinking for some time, i realized that general relativity was the answer, because it also applies to websites css/html, and used that as the basis on making this css dropdown work in all browsers<br />
<br />
<br />
<b>The Problem</b>
<br />
Internet Explorer <=6 does not support the :hover pseudo state on anything except links that have a valid href="#", for example: <code>
<a href="#link">link</a>
</code>
, so we cannot have a hover state on a div that contains all the dropdown links in IE6, there are some cool (and very dirty solutions) that i will link on the end of the post<br />
<b>The Solution</b>
<br />
Everything in websites consists of positioned boxes, each box also has an effect on another box, for example the box below it.<br />
now we can position a div with the dropdown links (sub-links) below a link, then add position:absolute; the div with the sub-links, and then add a margin-bottom:200px; or border-bottom:dashed transparent 200px; to the link on its hover state <br />
<br />
<code>
<style type="text/css"><br />
a:hover {<br />
border:bottom solid red 100px;<br />
}<br />
div {<br />
position:absolute;<br />
}<br />
</style><br />
<br />
<a href="#link">link</a><br />
<div><br />
<ul><br />
<li>link 1</li><br />
<li>link 2</li><br />
<li>link 3</li><br />
</ul><br />
</div><br />
</code>
<br />
<br />
, and the link will move the div below it, and this happens in every browser identically. (except opera at times, opera seems to ignore the margin, and thus you can either use a average dropdown method or use borders to push the div down).<br />
<br />
Now this is great and all, but what about the sub-links that are inside that you hover over?
the menu will immediately hide when you move your mouse away from the main link.<br />
now this was a big problem at the start, but because anything is possible in css, and as long as something is being hovered i can do anything to the website, i found a solution.<br />
<br />
each dropdown sublink in the div below the main link is being floated against a shifter div (thats what i called it), basically the links are pressed against a very high but very thin shifter div that will make them "<a href="http://www.adobe.com/cfusion/communityengine/index.cfm?event=showdetails&postId=1081&productId=1">float drop</a>" in case that the one of the sub-links expands (increases width).<br />
<br />
so one main link moves the absolutely positioned div that contains the sublinks dropdown, in which each and every link has the ability to do the same.
<br />
<b>Cons</b>
<br />
<ul class="list">
<li>¦ the mouses path from the main link to any of the sublinks must remain on top of some link</li>
<li>¦ requires extra div's per link, one for shifter one for containing the sub-links</li>
<li>¦ the dropdown links have to have a fixed (defined) with</li>
<li>¦ the height of the main link has to be fixed (defined)</li>
<li>¦ a little dirty example (will post a better example soon)</li>
<li>¦ has quirks when hovering and tabbing at the same time.</li>
<li>¦ requires some IE5-6 specific css (can be made to work without conditional comments)</li>
<li>¦ the dropdown block needs to have a fixed height (usually min screen height of supported screen sizes. this applies only to ie5-6)</li>
</ul>
<br />
<b>Pros</b>
<br />
<ul class="list">
<li>¦ It's Free</li>
<li>¦ Works in all browsers using only CSS without browser specific html</li>
<li>¦ Completely valid HTML/CSS (semantically correct xhtml/css) and can be made to work without any IE hacks (will give example later)</li>
<li>¦ Has natural tabbing, tabbing works just like that, tabbing can be easily disabled by removing the :focus and :active from the CSS.</li>
<li>¦ JavaScript can be added to improve user experience</li>
<li>¦ Works great and smooth in all browsers</li>
</ul>
<br />
<br />
<b>The Idea</b>
<br />
The idea itself of general relativity in websites can be taken to much higher and interesting lengths, and this is simply a small example that demonstrates that this area of css has not yet been explored.<br />
<br />
<br />
<br />
<b>Example ready made Code</b>
<br />
<br />
<div style="border: solid #000 1px; height: 400px; margin-bottom: 50px; overflow: scroll; position: relative; white-space: nowrap; width: 600px;">
<code>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><br />
<html><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><br />
<title>valid browser overflow test</title><br />
<style type="text/css"><br />
a {<br />
color:#000; <br />
}<br />
.navigation {<br />
height:2em; <br />
width:56.25em;<br />
background:#efefef;<br />
}<br />
.link {<br />
height:2em;<br />
position:relative;<br />
float:left;<br />
z-index:10;<br />
}<br />
a.main {<br />
position:relative;<br />
display:inline-block;<br />
text-decoration:none;<br />
line-height:2em;<br />
height:2em;<br />
z-index:10;<br />
}<br />
a.main b {<br />
position:relative;<br />
display:inline-block;<br />
padding:0 .5em 0 .5em;<br />
line-height:2em;<br />
cursor:pointer;<br />
}<br />
.sublinkscontainer {<br />
position:absolute;<br />
}<br />
.sublinks {<br />
position:relative;<br />
float:right;/*can be any float*/<br />
margin-top:-2em;<br />
}<br />
.sublinks a {<br />
display:block;<br />
background:orange;<br />
<br />
padding:.2em 0 .2em 0;<br />
text-decoration:none;<br />
<br />
}<br />
.shifter {<br />
position:relative;<br />
float:right;<br />
}<br />
.sublinks .bgthing {<br />
height:2em;<br />
background:orange;<br />
display:block;<br />
}<br />
<br />
ul, li {<br />
margin:0;<br />
padding:0;<br />
list-style:none;<br />
}<br />
<br />
<br />
<br />
<br />
/*height limit*/<br />
.link {<br />
top:-25em;<br />
}<br />
a.main {<br />
top:25em;<br />
}<br />
a.main:hover, a.main:active, a.main:focus {<br />
margin-bottom:25em;<br />
background:#000;<br />
color:#fff;<br />
outline:none;<br />
}<br />
a.main:active b, a.main:focus b {<br />
outline: dotted thin;/*resetting the outline*/<br />
}<br />
.sublinkscontainer, .shifter {<br />
height:25em;<br />
}<br />
/*valid browser height maximization*/<br />
.nav > .link {<br />
top:-1000em;<br />
}<br />
.link > a.main {<br />
top:1000em;<br />
}<br />
.link > a.main:hover, .link > a.main:active, .link > a.main:focus {<br />
margin-bottom:1000em;<br />
}<br />
.link > .sublinkscontainer, .sublinkscontainer > .shifter {<br />
height:1000em;<br />
}<br />
/*/valid browser height maximization*/<br />
<br />
<br />
/*width limit*/<br />
.sublinkscontainer {<br />
width:12.563em;<br />
}<br />
.sublinks a {<br />
width:12.5em;/*12.5 - padding*/<br />
}<br />
<br />
<br />
.sublinks a:hover, .sublinks a:active, .sublinks a:focus {<br />
margin-right:0.063em;<br />
background:#333;<br />
color:#fff;<br />
}<br />
.sublinks:hover a {/*opera fix*/<br />
margin-right:0.063em; <br />
}<br />
a.main:focus + div .sublinks a, a.main:active + div .sublinks a {/*valid browser tab+hover fix*/<br />
margin-right:0;<br />
}<br />
<br />
.shifter {<br />
width:0.063em;<br />
}<br />
.sublinks .bgthing {<br />
width:12.5em;<br />
}<br />
<br />
<br />
<br />
.content {<br />
clear:both; <br />
}<br />
<br />
<br />
<br />
a.main span {/*this nullifies the masks effects*/<br />
position:absolute;<br />
right:0;<br />
top:0;<br />
line-height:0;<br />
}<br />
a.main span i {/*the mask*/<br />
display:block;<br />
position:absolute;<br />
width:12.5em;<br />
background:#efefef;/*must be bg color for masking*/<br />
height:2em;<br />
top:0;<br />
right:auto;<br />
}<br />
<br />
<br />
<br />
.hidehotspot {<br />
position:relative;<br />
float:left;<br />
background:red;<br />
height:2em;<br />
z-index:10;<br />
}<br />
.hidehotspot b {<br />
position:absolute;<br />
background:#efefef;<br />
height:2em;<br />
width:56.25em;<br />
display:block;<br />
}<br />
<br />
<br />
/*ie5 fault for not supporting paddings on links*/<br />
.sublinks a b {<br />
font-weight:normal;<br />
position:relative;<br />
padding-left:.5em;<br />
display:block;<br />
}<br />
<br />
/*valid browser height fix*/<br />
.link > a.main:hover,<br />
.link > a.main:active,<br />
.link > a.main:focus {<br />
margin-bottom:0;<br />
}<br />
.link > a.main:hover + div .sublinks a,<br />
.link > a.main:active + div .sublinks a,<br />
.link > a.main:focus + div .sublinks a {<br />
margin-right:0.063em;<br />
}<br />
/*/valid browser height fix*/<br />
</style><br />
<br />
<!--[if lte IE 6]><br />
<style type="text/css"><br />
.link {<br />
margin-bottom:-2000px;/*only for ie5-6*/<br />
}<br />
/*ie5 fix*/<br />
li {<br />
float:left;<br />
}<br />
.nav {/*only ie5-6 need this*/<br />
height:25em;<br />
position:absolute;<br />
width:56.25em;<br />
overflow:hidden;<br />
}<br />
</style><br />
<![endif]--> <br />
</head><br />
<body><br />
<div class="navigation"><br />
<div class="nav"><br />
<div class="link"><br />
<a class="main" href="#MAIN"><b>MAIN LINK</b><span><i> </i></span></a><br />
<br />
<div><!--IE6 needs this div--><br />
<div class="sublinkscontainer"><br />
<div class="shifter"></div><br />
<ul class="sublinks"><br />
<li class="bgthing"> </li><br />
<li><a href="#test1"><b>test test</b></a></li><br />
<li><a href="#test2"><b>test test test test test test test test test test test test </b></a></li><br />
<li><a href="#test3"><b>test test</b></a></li><br />
<br />
<li><a href="#test4"><b>test</b></a></li><br />
<li><a href="#test5"><b>test test</b></a></li><br />
</ul><br />
</div><br />
</div><br />
</div><br />
<div class="link"><br />
<a class="main" href="#MAIN"><b>MAIN CAN BE LONG</b><span><i> </i></span></a><br />
<br />
<div><!--IE6 needs this div--><br />
<div class="sublinkscontainer"><br />
<div class="shifter"></div><br />
<ul class="sublinks"><br />
<li class="bgthing"> </li><br />
<li><a href="#test1"><b>test test</b></a></li><br />
<li><a href="#test2"><b>test test test</b></a></li><br />
<li><a href="#test3"><b>test test</b></a></li><br />
<br />
<li><a href="#test4"><b>test</b></a></li><br />
<li><a href="#test5"><b>test test</b></a></li><br />
</ul><br />
</div><br />
</div><br />
</div><br />
<div class="link"><br />
<a class="main" href="#MAIN"><b>MAIN</b><span><i> </i></span></a><br />
<br />
<div><!--IE6 needs this div--><br />
<div class="sublinkscontainer"><br />
<div class="shifter"></div><br />
<ul class="sublinks"><br />
<li class="bgthing"> </li><br />
<li><a href="#test1"><b>test test</b></a></li><br />
<li><a href="#test2"><b>test test test test test test test test test test test test </b></a></li><br />
<li><a href="#test3"><b>test test</b></a></li><br />
<br />
<li><a href="#test4"><b>test</b></a></li><br />
<li><a href="#test5"><b>test test</b></a></li><br />
</ul><br />
</div><br />
</div><br />
</div><br />
<br />
<br />
<div class="hidehotspot"><b> </b></div><br />
</div><br />
<br />
</div><br />
<br />
<div class="content"><br />
stuff<br /><br />
stuff stuff stuff<br />
</div><br />
</body><br />
</html>
</code>
</div>
<br />
<br />
<b><a href="http://www.tyssendesign.com.au/articles/css/dropdown-low-down/">Other available dropdowns</a></b>
<br />
I found this post after i made my dropdown, i was slightly dissapointed that my css dropdown was not the first pure css dropdown, Notice that only one of them is pure CSS, it involved very dirty/invalid/heavy code, and does not support tabbing.
<br />
<br />
i will post more examples of how this method of relative html can be used to make very interesting css features.<br />
<br />
<br />
<a href="http://www.cssplay.co.uk/menus/new-dropdown.html">Stu Nicholls has designed his own version of this dropdown</a>
<br />
<br />
<b>Copyright info</b>
<br />
The software referenced within this license is distributed free of charge and free from any warranty. It may be used freely for any purpose whatsoever. The author created and released this work because he is genuinely a Nice Person!<br />
<br />
Users are encouraged to use, modify, distribute, improve and otherwise manipulate the code. After all, it’s free.<br />
<br />
The author sincerely hopes that end users enjoy and appreciate the hard work that went into creating it, and would appreciate being referenced in future modifications of the code since it was based on the author’s original concept and work.<br />
<br />
Users are nonetheless encouraged to provide reciprocity whenever possible as it provides positive reinforcement and encouragement to the author. Furthermore, the minimum reciprocation I ask is to leave a <b>‘thank you’</b> comment in the area below:
Timo Huovinenhttp://www.blogger.com/profile/03601349277118301163noreply@blogger.com14tag:blogger.com,1999:blog-4160081393971349871.post-79673179263606572472009-08-26T10:27:00.009+02:002013-10-19T15:17:24.667+02:00About ThinkHTML.I'm Timo Huovinen.<br />
I've been making websites since 2007 and I keep this blog as a log of web ideas.<br />
You may be wondering why a web developer would use blogspot to write his website thoughts and ideas instead of making his own website for this purpose, well there are several reasons why I chose blogger, the main reason was that i have absolutely no time to make a website for myself.<br /><br />I have been making websites for a while now and there is always some web project that I need to do, but in the end I still don't have a personal website, and no place to log my ideas and thoughts and to write tutorials for the people starting with html, css, js and server side languages.<br /><br />A personal proper website needs time to be made, needs time to be maintained, needs time to be designed.<br /><br />Thus it was simply a cheaper and faster way for me to log my ideas, and to open up useful information for people on the internet.
<br />
<br />
p.s. all images/photos used on this website were made by me.
Timo Huovinenhttp://www.blogger.com/profile/03601349277118301163noreply@blogger.com0