Menu httml+css

menu.html

<!--Блок меню разместили в конце для поисковой оптимизации -->
		<div id='topmenu'>
			<ul>
				<li class='active'><a href="index.html">Главная</a></li>
				<li><a href="pilomateriali.html">Пиломатериалы</a>
					<ul>
						<li><a href="doska.html">Доска</a></li>
						<li><a href="vagonka.html">Вагонка</a></li>
						<li><a href="brusok.html">Брусок</a></li>
						<li><a href="block-house.html">Блок-хаус</a></li>
						<li><a href="imitacia-brusa.html">Имитация бруса</a></li>
						<li><a href="terasnaya-doska.html">Террасная доска</a></li>
						<li><a href="doska-pola.html">Доска пола</a></li>
						<li><a href="polok.html">Полок</a></li>
						<li><a href="planken.html">Планкен</a></li>
						<li><a href="ygoloki-plintusa.html">Уголки и плинтуса</a></li>
						<li><a href="mebelnii-shit.html">Мебельный щит</a></li>
					</ul>
				</li>
				<li><a href="yslugi.html">Услуги</a></li>
				<li><a href="contacts.html">Контакты</a></li>
			</ul>
		</div>
		<!--для файла CSS-->
		#topmenu{
			width:994px;
			height:45px;
			margin:0px auto;
			background-color:#303030;
			/*Фиксация меню при прокрутке.*/
			top:0px;
			position: fixed;
			z-index: 999;
		}

		#topmenu ul {
			display: inline-table;
			position: relative; /*чтоб внутренние элементы можно спозиционировать абсолютно относительно родительского*/
			vertical-align: middle;
			padding:0px;
			z-index:1;
			margin:0px;
			float:right;
			left:-50%;
		}

		#topmenu li {
			float: left; /*все пункты плавают в одну строку слева*/
			list-style: none; /*убираем маркеры*/
			width: 200px; /*одинаковая ширина всех пунктов*/
			text-align: center; /*выравнивание текста по центру*/
			position: relative;
			left:50%;
		}

		#topmenu ul li:hover{
			background-color:#f0f0f0;
		}

		#topmenu ul li:hover a{
			color:#696969;		
			
		}

		#topmenu .active a {
			background-color:#f0f0f0;
			color:#696969;	
		}

		#topmenu .active .active_inner a {
			background-color:#f0f0f0;
			color:#696969;	
		}


		#topmenu .active ul li a {
			background-color:#fff;
		}

		#topmenu .active ul li a:hover {
			background-color:#f0f0f0;
			color:#696969;
		}


		#topmenu li a {
			color: #cbcbcb;
		    display: block;
		    font-size: 14px;
		    font-weight: bold;
		    padding: 14px;
		    text-decoration: none;

		}

		#topmenu li a:hover { /*для всех ссылок в момент наведения*/
			background-color:#f0f0f0;
			color:#696969;
		}

		#topmenu ul ul {/*для вложенных списков*/
			display: none; /*скрыть все вложенные списки*/
			position: absolute; /*задаем абсолютное позиционирование*/
			top: 100%; /*чтобы выпадающий список не наезжал на главное меню, тоесть сдвигаем его под родительский список*/
			left:0%;
		}

		#topmenu ul ul li {
			float: none; /*отменяем обтекание*/
			position: relative;
			background-color:#fff;
			left:0%;
		}


		#topmenu ul ul li a{
			color: #696969;
		    font-size: 12px;
		    font-weight: normal;
		    padding: 14px 0 14px 42px;
		    text-align: left;
		}

		#topmenu ul li:hover ul{ /*при наведении мышки на элементы родительского списка, должны выпадать вложенные списки*/
			display: block;
			
		}
				<!--для файла CSS-->