pw.de

POC: HTML-Option-Menü nur mit CSS

Dass man ein Menü mit JavaScript (z.B. mit jQuery) realisieren kann, ist bekannt. Ich habe mich gefragt, ob man ein Menü nur mit HTML und CSS bauen kann... und bin fündig geworden:
icon
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nibh ipsum, tincidunt id posuere vitae, blandit non lacus. Cras lacus felis, placerat quis pharetra eu, dapibus a est. Mauris ac purus a ipsum viverra vulputate. Suspendisse quis porta erat. Nunc sollicitudin mi erat, vestibulum varius sem. Aenean ac diam justo, vel faucibus felis. Suspendisse mollis consectetur sapien, nec mattis nisl adipiscing non. Nullam fringilla dolor vitae dui mollis id facilisis elit euismod. Duis arcu urna, varius non egestas sed, viverra eget ligula. Etiam lacus risus, adipiscing ullamcorper pretium eu, aliquam eu ligula. Proin orci lacus, varius ac gravida quis, eleifend eu turpis. Curabitur eu justo ac nisi scelerisque faucibus. Mauris eu arcu et metus posuere malesuada. In eros nisi, placerat eget gravida eu, blandit in orci. Nam tempor dictum dolor ac eleifend. Maecenas ac nisl porta ligula imperdiet ultrices. Aenean condimentum accumsan libero at tempor.

code

HTML: 
<div class=object>
	<div class=option_menu>
		icon
		<ul class=option_menu_content>
			<li>menu_item_1</li>
			<li>menu_item_2</li>
			<li>menu_item_3</li>
		</ul>
	</div>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nibh ipsum, tincidunt ...
	</div>
</div>
CSS: 
.object {
    border:solid 1px #888;
}
.option_menu {
    color: red;
    float: right;
    position: relative;
}
.option_menu ul {
    position: absolute;
    top: 1em;
    right: 0px;
    background-color: #ccc;
    display: none;
    padding: 0;
    margin-top: 0;
    list-style-type:none;
}
div.option_menu:hover ul {
    display: block;
}
div.option_menu li:hover {
    background-color: #aaa;
}