Выпадающее горизонтальное меню

by Alexander Lashchevsky

HTML

<ul class="menu">
	<li class="point"><a href="">Пункт 1</a>
		<ul class="submenu">
			<li><a href="">Подпункт 1</a></li>
			<li><a href="">Подпункт 2</a></li>
			<li><a href="">Подпункт 3</a></li>
			<li><a href="">Подпункт 4</a></li>
		</ul>
	</li>
	<li class="point"><a href="">Пункт 2</a></li>
	<li class="point"><a href="">Пункт 3</a>
		<ul class="submenu">
			<li><a href="">Подпункт 1</a></li>
			<li><a href="">Подпункт 2</a></li>
			<li><a href="">Подпункт 3</a></li>
			<li><a href="">Подпункт 4</a></li>
		</ul>
	</li>
	<li class="point"><a href="">Пункт 4</a></li>
</ul>

CSS

* {padding: 0; margin: 0;}
.menu li {list-style: none;}
.menu .point {list-style: none; float: left; margin: 0 3px;}
.menu .point a {display: block; background: #ccc; color: #000; text-decoration: none; padding: 4px;}
.menu .point a:hover {background: #f2f2f2; text-decoration: none;}
.menu .point:hover .submenu {display: block;}
.menu .point .submenu {display: none; position: absolute;}