Помогите доработать деталь в меню

[Frie]

Здравствуйте народ!

столкнулся со следующей проблемой, у меня менюшка, вертикальная , вот такая

<ul class="menu2">
  <li><a href="razdel1.php"><span>Раздел 1</span></a>
   <ul>
			   <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><a href="razdel2.php"><span>Раздел 2</span></a></li>
</ul>

и css вот такой

.menu2{margin:0; padding:0; width:167px; list-style:none;background:rgb(255,255,255);}
.menu2 li{padding:0; margin:0 0 1px 0; height:30px; display:block; }
.menu2 li a{
	text-align:left;
	height:30px;
	padding:0px 5px;
	font:10px Verdana, Arial, Helvetica, sans-serif;
	font-weight:bold;
	color:#000;
	display:block;
	background:url('./images/verMenuImages.png') 0px 0px no-repeat;
	text-decoration:none;
}
.menu2 li a:hover{
	background:url('./images/verMenuImages.png') 0px -30px no-repeat;
	color:#000;
}
.menu2 li a.active, .menu2 li a.active:hover{background:url('./images/verMenuImages.png') 0px -80px no-repeat; color:rgb(0,0,0);}
.menu2 li a span{line-height:30px;}

.menu2 li ul {padding:0;margin:0;display:none;}
.menu2 li:hover ul {display:block;margin-left:100px;}
.menu2 li ul li {float:none;}
.menu2 li ul li a {font-size:0.9em;}

при наведении на раздел 1, справа выезжает подменюшка, но так как UL .menu2 равен 167 пикселям, - половина подменюшки обрезается и ее не видно.

сам UL .menu2 сделать больше не могу, так как справа у меня контент. Как бы сделать так чтобы подменюшка открывалась поверх всего и не обрезалась?

[WalkMan]

скоррее всего у родителей списка прописан overflow: hidden

если нет то с з-индексами поиграйся

[eyexal]

что бы подменю было поверх всего:

.menu2 li ul - задать ему position:absolute;

по поводу обрезания, не наблюдаю overflow который может обрезать

для начала попробуй задать position:absolute; для подменюшки, а там глянем !

[Frie]

что бы подменю было поверх всего:

.menu2 li ul - задать ему position:absolute;

по поводу обрезания, не наблюдаю overflow который может обрезать

для начала попробуй задать position:absolute; для подменюшки, а там глянем !

поставил position:absolute , менюха уже не режется. Теперь когда навожу я на первый раздел, вылезает справа подменюшка, потом я курсор перевожу ниже на 2 раздел а он не активный, и подменюшка первого раздела не улезает назад, пока мышку не уберу с области меню

[eyexal]

потому что у подменюшки стоит margin-left:100px;

поставь вместо этого - left:100px;

для .menu2 поставь - position:relative;

[Frie]

сейчас код такой

<ul class="menu2">
  <li><a href="news.php" class="active"><span>Новости</span></a></li>
  <li><a href="about.php"><span>О Компании </span></a></li>
  <li><a href="cat.php"><span>Каталог продукции</span></a></li>
  <li><a href="price.php"><span>Цены</span></a></li>
  <li><a href="op.php"><span>Оперативная полиграфия</span></a>

   <ul>
			   <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><a href="cat.php"><span>Каталог продукции</span></a></li>
  <li><a href="price.php"><span>Цены</span></a></li>
  <li><a href="uslugi.php"><span>Конструкции и дизайн</span></a></li>
  <li><a href="use.php"><span>Полезная информация</span></a></li>
  <li><a href="contacts.php"><span>Контакты</span></a></li>
  <li><a href="order.php"><span>Заказ</span></a></li>



</ul>

.menu2{margin:0; padding:0; width:167px; list-style:none;background:rgb(255,255,255);position:relative; }
.menu2 li{padding:0; margin:0 0 1px 0; height:30px; display:block; }
.menu2 li a{
	text-align:left;
	height:30px;
	padding:0px 5px;
	font:10px Verdana, Arial, Helvetica, sans-serif;
	font-weight:bold;
	color:#000;
	display:block;
	background:url('./images/verMenuImages.png') 0px 0px no-repeat;
	text-decoration:none;
}
.menu2 li a:hover{
	background:url('./images/verMenuImages.png') 0px -30px no-repeat;
	color:#000;
}
.menu2 li a.active, .menu2 li a.active:hover{background:url('./images/verMenuImages.png') 0px -60px no-repeat; color:rgb(0,0,0);}
.menu2 li a span{line-height:30px;}

.menu2 li ul {padding:0;margin:0;display:none;position:absolute;}
.menu2 li:hover ul {display:block;left:167px;}
.menu2 li ul li {float:none;}
.menu2 li ul li a {font-size:0.9em;}

менюшка обрезается и показывается ниже пункта меню над которым курсор

добавил width:167px; для .menu2 li:hover ul

теперь не режется

ВСЁЁЁЁ!!! разобрался!! eyexal спасибо огромное за помошь! всех благ тебе =)

Edited November 23, 2010 by Frie

[eyexal]

1. Подменю поставь над ссылкой основного меню:

  <li>
	  <ul>
	   <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>

  <a href="op.php"><span>Оперативная полиграфия</span></a>


  </li>

2. В .menu2 li:hover ul убери left:167px; и помести в .menu2 li ul

3. в .menu2 li ul поставь width:150px;