X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Выпадающее меню на CSS, Проблема с высотой ячейки списка
prostors
prostors
Topic Starter сообщение 2.3.2009, 1:38; Ответить: prostors
Сообщение #1


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

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

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

<!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
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ZiTosS
ZiTosS
сообщение 2.3.2009, 12:01; Ответить: ZiTosS
Сообщение #2


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


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
prostors
prostors
Topic Starter сообщение 2.3.2009, 22:47; Ответить: prostors
Сообщение #3


мне высоту ячейки задать нужно обязательно. как тогда задать высоту если я отсюда их уберу?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
prostors
prostors
Topic Starter сообщение 8.3.2009, 0:36; Ответить: prostors
Сообщение #4


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


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

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Разработка/доработка сайтов Wordpress, HTML/CSS/JS
Вёрстка, перенос на WP, правки
9 malamut 3248 25.1.2024, 14:36
автор: malamut
Открытая тема (нет новых ответов) СОЗДАНИЕ : / САЙтЫ / ЛЕНДЫ / БОТЫ ТГ / ВАЙТЫ / КРЕО / СОФТЫ / ДИЗАЙН [PHP, JS, HTML/CSS] и другое
5 CULA 3243 19.12.2023, 18:55
автор: CULA
Открытая тема (нет новых ответов) Веб-разработка (HTML, CSS)
1 ViktoriaFE 6435 5.5.2021, 5:22
автор: bekett
Открытая тема (нет новых ответов) Разработка адаптивных вебсайтов. HTML/CSS/WordPress(сайты-визитки, лендинги, корпоративные сайты, интернет-магазины).
0 kozak199110 1648 3.3.2021, 12:22
автор: kozak199110
Открытая тема (нет новых ответов) Продам адаптивный шаблон (css/html/js) под cj/tube сайт
2 zaiko 1410 29.12.2020, 23:49
автор: zaiko


 



RSS Текстовая версия Сейчас: 19.3.2024, 15:05
Дизайн