меню для храма

by Nat_Lilit

HTML

<div id="cssmenu">
	<ul>
		<li class="active">
			<a href="index.html">Главная</a></li>
		<li>
			<a href="#">Храмовая икона</a></li>
		<li class="has-sub ">
			<a href="#">Святые покровители храма</a>
			<ul>
				<li>
					<a href="#">Прп. Сергий Радонежский</a></li>
				<li>
					<a href="#">Прп. Валаам Хутынский</a></li>
			</ul>
		</li>
		<li class="has-sub ">
			<a href="#">О храме</a>
			<ul>
				<li class="has-sub ">
					<a href="#">История храма до 1917 г.</a>
					<ul>
						<li>
							<a href="#">Династия Романовых</a></li>
						<li>
							<a href="#">Род Нарыщкиных</a></li>
						<li>
							<a href="#">Род Шереметьевых</a></li>
					</ul>
				</li>
				<li>
					<a href="#">Храм в советские годы</a></li>
				<li>
					<a href="#">Возрождение храма</a></li>
				<li>
					<a href="#">Особенности архитектуры</a></li>
				<li>
					<a href="#">СМИ о храме</a></li>
			</ul>
		</li>
		<li class="has-sub ">
			<a href="#">Настоятель храма</a>
			<ul>
				<li>
					<a href="#">Интервью, публикации, выступления</a></li>
			</ul>
		</li>
		<li>
			<a href="#">Попечительский совет храма</a></li>
		<li class="has-sub ">
			<a href="#">Расписание богослужений</a>
			<ul>
				<li>
					<a href="#">Календарь поста</a></li>
			</ul>
		</li>
		<li class="has-sub ">
			<a href="#">Приходская жизнь</a>
			<ul>
				<li>
					<a href="#">Приходские события</a></li>
				<li>
					<a href="#">Социальное служение</a></li>
				<li>
					<a href="#">Молодежное служение</a></li>
				<li>
					<a href="#">Катехизаторская дейчтельность</a></li>
			</ul>
		</li>
		<li class="has-sub ">
			<a href="#">Архивы</a>
			<ul>
				<li>
					<a href="#">Фотоархив</a></li>
				<li>
					<a href="#">Видеоархив</a></li>
				<li>
					<a href="#">Архив храмовых новостей</a></li>
				<li>
					<a href="#">Архив епархиальных новостей</a></li>
			</ul>
		</li>
		<li class="has-sub ">
			<a href="#">Контактная информация</a>
			<ul>
				<li>
					<a...

CSS

/* мой модуль меню*/
@charset "UTF-8";
@import url(http://fonts.googleapis.com/css?family=Oxygen+Mono);
#cssmenu {
  padding: 0;
  margin: 0;
  border: 0;
  width: 35%
}

#cssmenu ul{
  list-style: none;
  margin: 0;
  padding: 0;
  margin: 0 0 1px 0;
}
#cssmenu li {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid #967737;
margin: 0 0 1px 0;

}

#cssmenu ul {
  position: relative;
  z-index: 597;
}

#cssmenu ul li {
  float: ;
  min-height: 1px;
  vertical-align: middle;
  border-style: solid;
}

#cssmenu ul li.hover,
#cssmenu ul li:hover {
  position: relative;
  z-index: 599;
  cursor: default;
  
}

#cssmenu ul ul {
  visibility: hidden;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 598;
  width: 100%;
}

#cssmenu ul ul li {
  float: none;
}

#cssmenu ul ul ul {
  top: 0;
  left: auto;
  right: -99.5%;
}

#cssmenu ul li:hover > ul {
  visibility: visible;
  top: 0;
    left: auto;
    right: -99.5%;
}

#cssmenu ul ul {
  bottom: 0;
  left: 0;
}

#cssmenu ul ul {
  margin-top: 0;
}

#cssmenu ul ul li {
  font-weight: normal;
}

#cssmenu a {
  display: block;
  line-height: 1em;
  text-decoration: none;
}

#cssmenu {
  /*background: #eeece0; */
  border-bottom: 4px solid #eeece0;
/*  font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;*/
  font-size: 12px;
  padding: 5px 5px 5px 5px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 12px;
}

#cssmenu > ul {
  *display: inline-block;

}

#cssmenu:after,
#cssmenu ul:after {
  content: '';
  display: block;
  clear: both;

}

#cssmenu a {
  background-image: linear-gradient(to bottom, #ffffff, #EEECE0);
  background-repeat: repeat-x;
  color: #000000;
  padding: 5px 10px;
  font-weight: bold;
}

#cssmenu ul {
  text-transform: uppercase;
}

#cssmenu ul ul {
 /* border-top: 4px solid #eeece0; */
  text-transform: none;
 /* min-width: 190px;*/
}

#cssmenu ul ul a {
    background-image: linear-gradient(to bottom, #ffffff, #EEECE0);
    background-repeat: repeat-x;
 ...