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


Пользователь месяца
TimurR TimurR 1-й за Август
Очков активности: 726 3 темы, 35 сообщений, 11 баллов репутации
ТОП самых активных за этот месяц
  • Фотография ShowPrint
    #1

    ShowPrint (ShowPrint.ru)
    Очков активности: 207 2 темы, 17 сообщений, 6 баллов репутации

  • Фотография Ixman
    #2

    Ixman (o5cat.ru)
    Очков активности: 72 0 тем, 8 сообщений, 6 баллов репутации

  • Фотография WGN
    #3

    WGN (worldgamenews.com)
    Очков активности: 69 Вне конкурса за определение пользователя месяца

  • Фотография magnet
    #4

    magnet (rbfxdirect.com)
    Очков активности: 67.5 Вне конкурса за определение пользователя месяца

  • Фотография BLIK
    #5

    BLIK
    Очков активности: 30 Вне конкурса за определение пользователя месяца

  • Фотография AnnaYa
    #6

    AnnaYa (topbase.ru)
    Очков активности: 30 2 темы, 4 сообщения, 2 балла репутации

  • Фотография Алексей111
    #7

    Алексей111
    Очков активности: 28.5 5 тем, 4 сообщения, 1 балл репутации

  • Фотография TimurR
    #8

    TimurR
    Очков активности: 27 Вне конкурса за определение пользователя месяца

  • Фотография torix
    #9

    torix
    Очков активности: 22.5 2 темы, 9 сообщений, 1 балл репутации

  • Фотография Developer
    #10

    Developer
    Очков активности: 21 1 тема, 11 сообщений, 1 балл репутации

  • Показать весь ТОП 10

Kwork.ru - услуги фрилансеров от 500 руб.

Поддержите форум! =)
Апдейты
  • Яндекс тИЦ: 19.11.2017
  • Яндекс выдача: 20.09.2018
Топ 5 участников по репутации


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

#1 prostors

prostors
  • Неактивные
  • 154 сообщений
  • Репутация: 0
0

Отправлено 02 March 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
  • Неактивные
  • 5148 сообщений
  • Репутация: 8

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

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

#3 prostors

prostors
    Topic Starter
  • Неактивные
  • 154 сообщений
  • Репутация: 0

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

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


  • 0

#4 prostors

prostors
    Topic Starter
  • Неактивные
  • 154 сообщений
  • Репутация: 0

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

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


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



Похожие темы

  Название темы Автор Статистика Последнее сообщение

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