erikdubbelboer/chromebug.html

## chromebug.html
<!DOCTYPE html>
<html lang=nl>
<head>
<meta charset=utf-8>
<title>Chrome float bug</title>

<style>
.tabs ul {
list-style-type: none;
}

.tabs li {
float: left;
position: relative;
}

.tabs a {
float: left;
color: #000;
text-decoration: none;
background-color: #eee;
padding: 1em;
}

.tabs a:hover {
background-color: #ddd;
}

.dropdown ul {
display: none;
position: absolute;
z-index: 3;
float: none;
}

.dropdown ul li {
float: none;

/* Uncomment this line to render the dropdown menu in Chrome */
/*display: block;*/
}

.dropdown ul {
top: 3em;
left: -2em;
}

.dropdown:hover ul {
display: block;
}
</style>

</head>
<body>

<p>
Hover over the "tab with dropdown" to show a dropdown menu. In Chrome this dropdown menu won't render but you will still be able to hover over it (see status bar) and click the items. All other browsers render the dropdown menu correctly.
</p>

<div class="tabs">
<ul>
  <li><a href="http://www.google.com"><span>Tab 1</span></a></li>

  <li class="dropdown"><a href="javascript: void(0);"><span>Tab with dropdown</span></a><ul>
    <li><a href="http://www.snotr.com"><span>Dropdown 1</span></a></li>
    <li><a href="http://www.adperium.com"><span>Dropdown 2</span></a></li>
    <li><a href="http://www.youtube.com"><span>Dropdown 3</span></a></li>
  </ul></li>
  <li><a href="http://www.example.com"><span>Tab 3</span></a></li>

</ul>
</div><!-- .tabs -->

</body>
</html>
	<!DOCTYPE html>
	<html lang=nl>
	<head>
	<meta charset=utf-8>
	<title>Chrome float bug</title>

	<style>
	.tabs ul {
	list-style-type: none;
	}

	.tabs li {
	float: left;
	position: relative;
	}

	.tabs a {
	float: left;
	color: #000;
	text-decoration: none;
	background-color: #eee;
	padding: 1em;
	}

	.tabs a:hover {
	background-color: #ddd;
	}

	.dropdown ul {
	display: none;
	position: absolute;
	z-index: 3;
	float: none;
	}

	.dropdown ul li {
	float: none;

	/* Uncomment this line to render the dropdown menu in Chrome */
	/display: block;/
	}

	.dropdown ul {
	top: 3em;
	left: -2em;
	}

	.dropdown:hover ul {
	display: block;
	}
	</style>

	</head>
	<body>

	<p>
	Hover over the "tab with dropdown" to show a dropdown menu. In Chrome this dropdown menu won't render but you will still be able to hover over it (see status bar) and click the items. All other browsers render the dropdown menu correctly.
	</p>

	<div class="tabs">
	<ul>
	<li><a href="http://www.google.com"><span>Tab 1</span></a></li>

	<li class="dropdown"><a href="javascript: void(0);"><span>Tab with dropdown</span></a><ul>
	<li><a href="http://www.snotr.com"><span>Dropdown 1</span></a></li>
	<li><a href="http://www.adperium.com"><span>Dropdown 2</span></a></li>
	<li><a href="http://www.youtube.com"><span>Dropdown 3</span></a></li>
	</ul></li>
	<li><a href="http://www.example.com"><span>Tab 3</span></a></li>

	</ul>
	</div><!-- .tabs -->

	</body>
	</html>