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


Конкурс "Лучший отзовик"
× Быстрый вопрос
Пользователь месяца
ShowPrint ShowPrint 1-й за Март
Очков активности: 1 152 1 тема, 61 сообщение, 12 баллов репутации
Сайт: ShowPrint.ru
ТОП самых активных за этот месяц
  • Фотография Андрей WPMasterKZ
    #1

    Андрей WPMasterKZ (wpmaster.kz)
    Очков активности: 525 Вне конкурса за определение пользователя месяца

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

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

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

    Vmir
    Очков активности: 346.5 3 темы, 24 сообщения, 7 баллов репутации

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

    ShowPrint (ShowPrint.ru)
    Очков активности: 204 Вне конкурса за определение пользователя месяца

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

    Mandarin
    Очков активности: 76.5 2 темы, 11 сообщений, 3 балла репутации

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

    maxnik (konovalovpavel.ru)
    Очков активности: 63 1 тема, 18 сообщений, 2 балла репутации

  • Фотография re-search
    #7

    re-search
    Очков активности: 49.5 7 тем, 12 сообщений, 1 балл репутации

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

    Strazh
    Очков активности: 37.5 1 тема, 22 сообщения, 1 балл репутации

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

    pozitron123
    Очков активности: 36 2 темы, 6 сообщений, 2 балла репутации

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

    Constantine
    Очков активности: 33 3 темы, 13 сообщений, 1 балл репутации

  • Показать весь ТОП 10
Поддержите форум! =)
Апдейты
  • Яндекс ИКС: 27.03.2019
  • Яндекс выдача: 18.04.2019
Топ 5 участников по репутации


Выпадающее меню на 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