Форум Сайтостроение Веб-строительство

Проблема с вертикальным меню.

5
На сайте с 05.04.2008
Offline
48
501th
731

Здравствуйте.

Сломал голову и выкурил уже с десяток сигарет, мыслей нет, надеюсь на вашу помощь.

Есть сайт: http://stroym24.ru/?cat=13 (к примеру эта страница)

Там захотел сделать боковое вертикальное меню (слева). Сперва думал сделать меню-аккордеон на jquery, благо готовых решений в инете - пруд пруди. Не получилось, мб из-за конфликта со слайдером на главной, хз. Ни один из аккордеонов не заработал (ставил вызов скрипта и в хедер, и в футер - не помогло).

Пришлось остановиться на варианте с css меню. Вот html код меню: 


 

<ul class="pureCssMenu pureCssMenum">

	<li class="pureCssMenui"><a class="pureCssMenui" href="http://stroym24.ru/?cat=17" target="_blank"><span>Двери</span><!--[if gt IE 6]--></a><!--[endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->

	<ul class="pureCssMenum">

		<li class="pureCssMenui"><a class="pureCssMenui" href="http://stroym24.ru/?cat=18" target="_blank">Ламинированные двери</a></li>

		<li class="pureCssMenui"><a class="pureCssMenui" href="http://stroym24.ru/?cat=19" target="_blank">Двери ПВХ и Экошпон</a></li>

		<li class="pureCssMenui"><a class="pureCssMenui" href="http://stroym24.ru/?cat=20" target="_blank"><span>Шпонированные двери</span><!--[if gt IE 6]--></a><!--[endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->

		<ul class="pureCssMenum">

			<li class="pureCssMenui"><a class="pureCssMenui" href="http://stroym24.ru/?cat=35" target="_blank">Фабрика "Текона"</a></li>

			<li class="pureCssMenui"><a class="pureCssMenui" href="http://stroym24.ru/?cat=36" target="_blank">Фабрика “Mario Rioli”</a></li>

			<li class="pureCssMenui"><a class="pureCssMenui" href="http://stroym24.ru/?cat=37" target="_blank">Фабрика “Lavan”</a></li>

		</ul>

		<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>

	</ul>

	<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>

	<li class="pureCssMenui"><a class="pureCssMenui" href="http://stroym24.ru/?cat=13" target="_blank"><span>Сантехника</span><!--[if gt IE 6]--></a><!--[endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->

	<ul class="pureCssMenum">

		<li class="pureCssMenui"><a class="pureCssMenui" href="http://stroym24.ru/?cat=14" target="_blank"><span>Смесители</span><!--[if gt IE 6]--></a><!--[endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->

		<ul class="pureCssMenum">

			<li class="pureCssMenui"><a class="pureCssMenui" href="http://stroym24.ru/?cat=40" target="_blank">Grohe & HANSGROHE</a></li>

			<li class="pureCssMenui"><a class="pureCssMenui" href="http://stroym24.ru/?cat=41" target="_blank">G.LAUF</a></li>

			<li class="pureCssMenui"><a class="pureCssMenui" href="http://stroym24.ru/?cat=42" target="_blank">KAISER</a></li>

			<li class="pureCssMenui"><a class="pureCssMenui" href="http://stroym24.ru/?cat=43" target="_blank">Damixa</a></li>

			<li class="pureCssMenui"><a class="pureCssMenui" href="http://stroym24.ru/?cat=44" target="_blank">Kordi</a></li>

			<li class="pureCssMenui"><a class="pureCssMenui" href="http://stroym24.ru/?cat=45" target="_blank">Oras</a></li>

		</ul>

		<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>

		<li class="pureCssMenui"><a class="pureCssMenui" href="http://stroym24.ru/?cat=38" target="_blank">Унитазы</a></li>

		<li class="pureCssMenui"><a class="pureCssMenui" href="http://stroym24.ru/?cat=39" target="_blank">Ванны</a></li>

	</ul>

	<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>

</ul>

и css-кусок от него: 


#pcm{display:none;}

ul.pureCssMenu ul{display:none}

ul.pureCssMenu {

width:220px;}

ul.pureCssMenu li:hover>ul{display:block}

ul.pureCssMenu ul{position: absolute;left:98%;top:-1px; z-index: 900;}

ul.pureCssMenu ul ul{position: absolute;left:98%;top:-2px; z-index: 900;}

ul.pureCssMenu,ul.pureCssMenu ul {

	margin:0px;

	list-style:none;

	padding:0px 1px 1px 0px;

	background-color:#d71337;

	background-repeat:repeat;

	border-color:;

	border-width:0px;

	border-style:solid;

}

ul.pureCssMenu table {border-collapse:collapse}ul.pureCssMenu {

	display:block;

	zoom:1;

	_width:106.05000000000001px;

	float: left;

}

ul.pureCssMenu ul{

	width:235px;

}

ul.pureCssMenu li{

	display:block;

	margin:1px 0px 0px 1px;

	font-size:0px;

	z-index: 900;

}

ul.pureCssMenu a:active, ul.pureCssMenu a:focus {

outline-style:none;

}

ul.pureCssMenu a, ul.pureCssMenu li.dis a:hover, ul.pureCssMenu li.sep a:hover {

	display:block;

	vertical-align:middle;

	zoom:1;

	background-color:#d71337;

	border-width:0px;

	border-color:#E4E1DE;

	border-style:solid;

	text-align:left;

	text-decoration:none;

	padding:4px;

	_padding-left:0;

	font:bold 11px Georgia;

	color: #FFFFFF;

	text-decoration:none;

	cursor:default;

	z-index: 900;

	position: relative;

}



ul li ul li a.pureCssMenui {z-index: 900; position: relative;}

ul.pureCssMenu span{

	overflow:hidden;

}

ul.pureCssMenu ul li {

	float:none;

}

ul.pureCssMenu ul a {

	text-align:left;

	white-space:nowrap;

}

ul.pureCssMenu li.sep{

	text-align:left;

	padding:0px;

	line-height:0;

}

ul.pureCssMenu li.sep span{

	float:none;	padding-right:0;

	width:100%;

	height:3;

	display:inline-block;

	background-color:;	background-image:none;}

ul.pureCssMenu li:hover{

	position:relative;

}

ul.pureCssMenu li:hover>a{

	background-color:#9c0923;

	border-color:#FFFFFF;

	border-style:solid;

	font:bold 11px Georgia;

	color: #FFFFFF;

	text-decoration:none;

}

ul.pureCssMenu li a:hover{

	position:relative;

	background-color:#9c0923;

	border-color:#FFFFFF;

	border-style:solid;

	font:bold 11px Georgia;

	color: #FFFFFF;

	text-decoration:none;

}

ul.pureCssMenu li.dis a {

	color: #AAAAAA !important;

}

ul.pureCssMenu img {border: none;float:left;_float:none;margin-right:4px;width:24px;

height:24px;

}

ul.pureCssMenu ul img {width:16px;

height:16px;

}

ul.pureCssMenu img.over{display:none}

ul.pureCssMenu li.dis a:hover img.over{display:none !important}

ul.pureCssMenu li.dis a:hover img.def {display:inline !important}

ul.pureCssMenu li:hover > a img.def  {display:none}

ul.pureCssMenu li:hover > a img.over {display:inline}

ul.pureCssMenu a:hover img.over,ul.pureCssMenu a:hover ul img.def,ul.pureCssMenu a:hover a:hover ul img.def,ul.pureCssMenu a:hover a:hover img.over,ul.pureCssMenu a:hover a:hover a:hover img.over{display:inline}

ul.pureCssMenu a:hover img.def,ul.pureCssMenu a:hover ul img.over,ul.pureCssMenu a:hover a:hover ul img.over,ul.pureCssMenu a:hover a:hover img.def,ul.pureCssMenu a:hover a:hover a:hover img.def{display:none}

ul.pureCssMenu a:hover ul,ul.pureCssMenu a:hover a:hover ul{display:block}

ul.pureCssMenu a:hover ul ul{display:none}

ul.pureCssMenu span{

	display:block;

	background-image:url(./images/arrow_sub5.gif);

	background-position:right center;

	background-repeat: no-repeat;

   padding-right:12px;}

ul.pureCssMenu li:hover>a>span{	background-image:url(./images/arrow_main4.gif);

}

ul.pureCssMenu a:hover span{	_background-image:url(./images/arrow_main4.gif)}

ul.pureCssMenu ul span,ul.pureCssMenu a:hover table span{background-image:url(./images/arrow_sub5.gif)}

ul.pureCssMenu ul li:hover > a span{	background-image:url(./images/arrow_main4.gif);}

ul.pureCssMenu table a:hover span,ul.pureCssMenu table a:hover a:hover span{background-image:url(./images/arrow_main4.gif)}

ul.pureCssMenu table a:hover table span{background-image:url(./images/arrow_sub5.gif)}

Меню отображается, но беда в том, что пункты 2 и 3 уровней "заезжают" под тело контентной части. Пробовал методом полутыка расставлять z-index - не помогло.

Если у кого есть время и желание помочь - посмотрите, пожалуйста, буду очень благодарен.

Max_Q
На сайте с 14.11.2011
Offline
9
Max_Q
#1

Уберите overflow:hidden;


.sidebar_bottom {
height: 100%;
overflow: hidden;
padding-right: 20px;
}

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий