Перейти к содержимому


Партнерская программа Kredov

Выпадающее меню на CSS

#1 prostors

prostors
  • Пользователь
  • 154 сообщений
  • Репутация: 0
0

Отправлено 02 Март 2009 - 00:38

Есть вот такой выпадающий список. В выпадающее меню первого уровня выпадает справа от основного.

Надо сделать так чтобы выпадающее меню первого уровня появлялось в столбце с основным меню, тоесть часть основного меню отъезжала вниз, а на этом месте появлялось, вып меню первого уровня.

Если не указывать высоту ячейки меню работает как надо в условии.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
	<title>Выпадающее меню CSS</title>
	

<style type="text/css">  

ul {

text-align:center;

margin: 0; 
padding: 0; 
list-style: none; 
width: 114px;
border-bottom: 0;
background-image: url(image/1.gif);
position: relative;  
}

li {
vertical-align: middle;

height: 24px;
position: relative;
background-image: url(image/1.gif);) 

 }

a {
height: 24px; 
display: block; 
text-decoration: none; 
color: #fff; 
padding: 0; 
border: 0; 
border-bottom: 0;
}
a:hover{
background-image: url(image/2.gif);) }

li:hover ul {

display: block;}


li ul { 
margin: 0; 
padding: 0; 
list-style: none; 
width: 114px;
border-bottom: 0; 
position: relative; 
display: none;

left:113px;
top:-12px;

 }


li:hover li ul{
display:none; }

 

li:hover li:hover ul{
width: 170px;
position: absolute; 
left:113px;
top:12px;
display:block; }

 

/* Fix IE. Hide from IE Mac \*/ * html ul li { float: left; height: 1%; } * html ul li a { height: 1%; } /* End */ 
</style>

<script type="text/javascript"><!--//--><![CDATA[//><!--
startList = function() { if (document.all&&document.getElementById) { navRoot = document.getElementById("nav"); 
for (i=0; i<navRoot.childNodes.length; i++) { node = navRoot.childNodes[i]; 
if (node.nodeName=="LI") { node.onmouseover=function() { this.className+=" over"; 
} node.onmouseout=function() { this.className=this.className.replace 
 (" over", "");} } } } } window.onload=startList;//--><!]]></script>



</head>

<body>

<h1>Пример меню</h1>


<ul id="nav" vertical-align="100px";>
  <li><a  href="#null">Главная</a></li>
  <li><a href="#null">О нас</a></li>
  <li><a href="#null">Услуги</a> 
		<ul>
		  <li><a href="lichnaya-ohrana.htm">Основное предложение</a>
	<ul>
		  <li><a href="#null">Основное предложение</a></li> 
		  <li><a href="#null">Основное предложение</a></li>
		  <li><a href="#null">Основное предложение</a></li>
		</ul>
</li>
		  <li><a href="#null">Производители</a></li>
		  <li><a href="#null">Другое</a></li>
		</ul>
  </li>
<li><a href="#null">Документы</a>
<li><a href="#null">Вакансии</a> 
<li><a href="#null">Контакты</a> 
  
</ul>

</body>
</html>

 

 

  • 0

#2 ZiTosS

ZiTosS
  • Пользователь
  • 5 148 сообщений
  • Репутация: 8

Отправлено 02 Март 2009 - 11:01

prostors, уберите из li{...} и a{...} размеры height, они обрезают блоки и отсюда идёт наложение одного на другой.
  • 0

#3 prostors

prostors
    Topic Starter
  • Пользователь
  • 154 сообщений
  • Репутация: 0

Отправлено 02 Март 2009 - 21:47

мне высоту ячейки задать нужно обязательно. как тогда задать высоту если я отсюда их уберу?


  • 0

#4 prostors

prostors
    Topic Starter
  • Пользователь
  • 154 сообщений
  • Репутация: 0

Отправлено 07 Март 2009 - 23:36

ещё актуально. кто может написать скрипт обработчик благодаря которому я смогу присваивать тегам <ul>, <li>, <a>:
1)атрибуты высоты
2)состояние ссылок такие как hover, хорошо ещё бы состояние анкора к которому уже подвели мышку, но перевели мышку на следующее выпадающее меню --- для тегов списков


Это делается для IE6 и более младших версий.
  • 0


Оформление форума – IPBSkins.ru