Горизонтальное многоуровневое меню на CSS3

by Andrey Dobrovoi

HTML

<div id="wrap">
<h1><a href="http://dbmast.ru/sozdaem-mnogourovnevoe-gorizontalnoe-menyu-s-effektom-animacii-css3">Dobrovoimaster</a></h1>
<h2>Специально для Серёги, без свободной ячейки</h2>
<nav>
	<ul id="menu">
		<li><a href="">Главная</a></li>

		<li>
			<a href="">Категории</a>
			<ul>
				<li>
					<a href="">HTML/CSS</a>
					<ul>
						<li><a href="">Пункт 11</a></li>

						<li><a href="">Пункт 12</a></li>
						<li><a href="">Пункт 13</a></li>
						<li><a href="">Пункт 14</a></li>
					</ul>				
				</li>
				<li>
					<a href="">Графика</a>

					<ul>
						<li><a href="">Пункт 21</a></li>
						<li><a href="">Пункт 22</a></li>
						<li><a href="">Пункт 23</a></li>
						<li><a href="">Пункт 24</a></li>
					</ul>				
				</li>

				<li>
					<a href="">Разработка</a>
					<ul>
						<li><a href="">Пункт 31</a></li>
						<li><a href="">Пункт 32</a></li>
						<li><a href="">Пункт 33</a></li>
						<li><a href="">Пункт 34</a></li>

					</ul>				
				</li>
				<li>
					<a href="">Веб дизайн</a>				
					<ul>
						<li><a href="">Пункт 41</a></li>
						<li><a href="">Пункт 42</a></li>
						<li><a href="">Пункт 43</a></li>

						<li><a href="">Пункт 44</a></li>
					</ul>	
				</li>
			</ul>
		</li>
		<li>
			<a href="">Статьи</a>
			<ul>

				<li>
					<a href="">Пункт 1</a>
					<ul>
						<li>
							<a href="">Пункт 11</a>		
							<ul>
								<li><a href="">Пункт 111</a></li>
								<li><a href="">Пункт 112</a></li>

								<li><a href="">Пункт 113</a></li>
							</ul>							
						</li>
						<li>
							<a href="">Пункт 12</a>
							<ul>
								<li><a href="">Пункт 121</a></li>
								<li><a href="">Пункт 122</a></li>

								<li><a href="">Пункт 123</a></li>
							</ul>							
						</li>
						<li>
							<a href="">Пункт 13</a>
							<ul>
								<li><a href="">Пункт 131</a></li>
								<li><a href="">Пункт 132</a></li>

								<li><a href="">Пункт...

CSS

body { 
     background: #eee;font: 18px Helvetica, Arial, Sans-Serif;
}
h1 a {
display: block; 
text-decoration: none;
font: 72px Helvetica, Arial, Sans-Serif; letter-spacing: -5px;  
text-align: center;
color: #999; text-shadow: 0px 3px 8px #2a2a2a;
}
h1 a:hover {
color: #a0a0a0; text-shadow: 0px 5px 8px #2a2a2a;
}
h2 {
font: 28px Tahoma, Helvetica, Arial, Sans-Serif;
text-align: center;
color: #222; text-shadow: 0px 2px 3px #555;
}
#wrap {
width: 960px;
margin: 0px auto 0px;
padding: 0px;
}
/* Стили Меню */
	#menu, #menu ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}
	
	#menu {
		width: auto;
		margin: 0 auto;
		border: 1px solid #222;
        float: left;
		background-color: #111;
		background-image: -moz-linear-gradient(#444, #111); 
		background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));	
		background-image: -webkit-linear-gradient(#444, #111);	
		background-image: -o-linear-gradient(#444, #111);
		background-image: -ms-linear-gradient(#444, #111);
		background-image: linear-gradient(#444, #111);
		-moz-border-radius: 6px;
		-webkit-border-radius: 6px;
		border-radius: 6px;
		-moz-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
		-webkit-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
		box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
	}
	
	#menu:before,
	#menu:after {
		content: "";
		display: table;
	}
	
	#menu:after {
		clear: both;
	}
	
	#menu {
		zoom:1;
	}
	
	#menu li {
		float: left;
		border-right: 1px solid #222;
		-moz-box-shadow: 1px 0 0 #444;
		-webkit-box-shadow: 1px 0 0 #444;
		box-shadow: 1px 0 0 #444;
		position: relative;
	}
	#menu li.last {
border-right: 0;
box-shadow: none;
}
	#menu a {
		float: left;
		padding: 12px 30px;
		color: #999;
		text-transform: uppercase;
		font: bold 12px Arial, Helvetica;
		text-decoration: none;
		text-shadow: 0 1px 0 #000;
	}
	
	#menu li:hover > a {
		color: #fafafa;
	}
	
	*html #menu li a:hover { /* IE6 only */
		color: #fafafa;
	}
	
	#menu ul {
		margin: 20px 0 0...