drop down menu

x00peR

Нашел на просторах инета вот такую менюшку

Меню: (я кое что вырезал, так как думаю оно не нужно было)

<!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: Ссылка имеет такое название:
Главные админы
Но в тот момент когда меню выскакивает это ссылка разделяется на две строки:
Главные
админы
Как сделать в одну строку? Я так понимаю что ширина фиксированная, но потыкав в ксс я не смог найти той самой ширины

1 - http://htmlbook.ru/css/z-index
2 - http://htmlbook.ru/css/white-space = nowrap

x00peR

Сделал вот так:

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

@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 и ничего, результат один и тот же

нужна страница в живую.

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

x00peR

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 --

Оказалось смертельно

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

x00peR писал(а):Логин: test

чтот не вижу там этого блока

x00peR писал(а):Не смертельно это будет?

не смертельно, но в некоторых браузерах может что-нить поехать. в общем проверяй во всем отображение форума.

x00peR

Решил другое меню ставить, а то траблы пошли