drop down menu

x00peR
Сообщения: 141
Зарегистрирован: 05 мар 2011
Нашел на просторах инета вот такую менюшку :)
Меню: (я кое что вырезал, так как думаю оно не нужно было)

Код: Выделить всё

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

</head>
<body>

<link href="menu/css/dropdown/dropdown.css" rel="stylesheet"/>


<ul id="nav" class="dropdown dropdown-horizontal">
   <li class="dir">Разное
      <ul>
         <li><a href="./"><font color="red">Правила</font></a></li>
         <li><a href="./">Приглашения</a></li>
         <li class="dir"><a href="./">Главные админы</a>
            <ul>
               <li><a href="./">1</a></li>
               <li><a href="./">2</a></li>
            </ul>
         </li>
         <li><a href="./">Ваши сообщения</a></li>
         <li><a href="./">Ваши нерешенные темы</a></li>
         
      </ul>
   </li>
</ul>


</body>
</html>


Вот css:

Код: Выделить всё

@charset "UTF-8";

/**
 * Horizontal CSS Drop-Down Menu Module
 *
 * @file      dropdown.css
 * @package      Dropdown
 * @version      0.8
 * @type      Transitional
 * @stacks      597-599
 * @browsers   Windows: IE6+, Opera7+, Firefox1+
 *            Mac OS: Safari2+, Firefox2+
 *
 * @link      http://www.lwis.net/
 * @copyright   2006-2008 Live Web Institute
 *
 */

ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
 list-style: none;
 margin: 0;
 padding: 0;
}

ul.dropdown {
 position: relative;
 z-index: 597;
}

ul.dropdown li {
 float: left;
 line-height: 1.3em; // Расстояние между словами
 vertical-align: middle;
 zoom: 1;
}

ul.dropdown li.hover,
ul.dropdown li:hover {
 position: relative;
 z-index: 599;
 cursor: default;
}

ul.dropdown ul {
 visibility: hidden;
 position: absolute;
 top: 100%;
 left: 0;
 z-index: 598;
 width: 100%;
}

ul.dropdown ul li {
 float: none;
}

ul.dropdown ul ul {
 top: 1px;
 left: 99%;
}

ul.dropdown li:hover > ul {
 visibility: visible;
}


Меню хотел вставить в то место, где находится: личный раздел, фак, пользователи ...
Возникла проблема, в меню и в том месте куда нужно вставить разные ul class, проблему решил вот таким образом, вставил в нужное место этот код:

Код: Выделить всё

<!-- INCLUDE simple.horizontal.html -->

Все заработало.
НО, так как меню выпадающее, то соответственно оно имеет много ссылок, которые выпадают вниз.
Теперь о проблеме №1: последние ссылки, которые выпадают - залазят под ниже лежащий слой форума, т.е. их просто напросто не видно. Как сделать чтобы ссылки были поверх слоя?
Проблема №2: Ссылка имеет такое название:
Главные админы
Но в тот момент когда меню выскакивает это ссылка разделяется на две строки:
Главные
админы
Как сделать в одну строку? Я так понимаю что ширина фиксированная, но потыкав в ксс я не смог найти той самой ширины :(

Аватара пользователя
Distructor
Администратор
Сообщения: 1599
Зарегистрирован: 28 дек 2009

x00peR
Сообщения: 141
Зарегистрирован: 05 мар 2011
Сделал вот так:

Код: Выделить всё

@charset "UTF-8";

/**
 * Horizontal CSS Drop-Down Menu Module
 *
 * @file      dropdown.css
 * @package      Dropdown
 * @version      0.8
 * @type      Transitional
 * @stacks      597-599
 * @browsers   Windows: IE6+, Opera7+, Firefox1+
 *            Mac OS: Safari2+, Firefox2+
 *
 * @link      http://www.lwis.net/
 * @copyright   2006-2008 Live Web Institute
 *
 */

ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
 list-style: none;
 margin: 0;
 padding: 0;
 white-space: pre;
 z-index: 600;
}

ul.dropdown {
 position: relative;
 z-index: 600;
 white-space: pre;
}

ul.dropdown li {
 float: left;
 line-height: 1.3em; // Расстояние между словами
 vertical-align: middle;
 zoom: 1;
 z-index: 600;
 white-space: pre;
}

ul.dropdown li.hover,
ul.dropdown li:hover {
 position: relative;
 z-index: 600;
 cursor: default;
 white-space: pre;
}

ul.dropdown ul {
 visibility: hidden;
 position: absolute;
 top: 100%;
 left: 0;
 white-space: pre;
 z-index: 600;
 width: 100%;
}

ul.dropdown ul li {
 float: none;
 z-index: 600;
 white-space: pre;
}

ul.dropdown ul ul {
 top: 1px;
 left: 99%;
 z-index: 600;
 white-space: pre;
}

ul.dropdown li:hover > ul {
 visibility: visible;
 z-index: 600;
 white-space: pre;
}

И получилось так как на картинке. При значениях z-index 1,2,3.. результат как на картинке

-- добавлено 04 май 2012, 10:06 --

Все значения z-index убрал и результат такой же (:

-- добавлено 04 май 2012, 10:19 --

Поэкспериментировал со значениями , 1,2,3,6,100,600 и ничего, результат один и тот же :(
Вложения
123.jpg

Аватара пользователя
Distructor
Администратор
Сообщения: 1599
Зарегистрирован: 28 дек 2009
нужна страница в живую.

на вскидку - перекрываются css форума и твоей доработки

x00peR
Сообщения: 141
Зарегистрирован: 05 мар 2011
http://cs-game.biz
Логин: test
Pass: testtest

Я понял что стиль форума перекрывает стиль меню. Дело в z-index. В меню указано значение 599. Не уж то в форуме оно больше? И где бы его посмотреть еще :(

-- добавлено 04 май 2012, 21:36 --

Одну проблему решил:
Убрал в твик ксс

Код: Выделить всё

/* navbar fix */
* html .clearfix, * html .navbar, ul.linklist {
   height: 4%;
   overflow: hidden;
}

вот это

Код: Выделить всё

overflow: hidden;


Не смертельно это будет?

-- добавлено 04 май 2012, 21:56 --

Оказалось смертельно :( Личка вся поехала. Как вариант - отказаться от такого меню :(

Аватара пользователя
Distructor
Администратор
Сообщения: 1599
Зарегистрирован: 28 дек 2009
x00peR писал(а):Логин: test
чтот не вижу там этого блока

x00peR писал(а):Не смертельно это будет?
не смертельно, но в некоторых браузерах может что-нить поехать. в общем проверяй во всем отображение форума.

x00peR
Сообщения: 141
Зарегистрирован: 05 мар 2011
Решил другое меню ставить, а то траблы пошли :)


Вернуться в «Вопросы по веб-дизайну и верстке»