Выпадающее меню с помощью тегов <ul>, <li>

Юрий · August 17, 2009

Идея заключается в том, чтобы из списка сделать рубрикатор с выпадающими подрубриками. В FireFox всё работает нормально, в IE6 возникают проблемы:

Так должно быть:

Так в IE6:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">

<head>
  <title></title>
  <style type="text/css">
  /*<![CDATA[*/

	ul
	{
		width: 600px;
		list-style: none;
	}

	ul li
	{
		width: 278px;
		float: left;
		position: relative;

		background: #D0D0D0;
		border: 1px solid #909090;
		padding: 5px 0;
		margin: 5px;
		font: 100 12px Arial;
	}

	li ul
	{
		background: #ccc;
		width: 278px;
		position: absolute;
		z-index: 999;

		top: 25px;
		left: -1px;
		list-style: none;
		margin: 0;
		padding: 0;
		border: 1px solid #909090;
	}

	li ul li
	{
		background: #008000;
		padding: 2px 0;
		margin: 0;
		border: 0;
	}

  /*]]>*/
  </style>
</head>

<body>

	<ul>
		<li>Раздел рубрикатора
			<ul>
				<li>Подразделы</li>
				<li>Подразделы</li>
				<li>Подразделы</li>
				<li>Подразделы</li>
				<li>Подразделы</li>
				<li>Подразделы</li>
				<li>Подразделы</li>
				<li>Подразделы</li>
				<li>Подразделы</li>
				<li>Подразделы</li>
				<li>Подразделы</li>
				<li>Подразделы</li>
			</ul>
		</li>
		<li>Раздел рубрикатора</li>
		<li>Раздел рубрикатора</li>
		<li>Раздел рубрикатора</li>
		<li>Раздел рубрикатора</li>
		<li>Раздел рубрикатора</li>
		<li>Раздел рубрикатора</li>
	</ul>

</body>

</html>

Edited August 17, 2009 by Юрий

hel · August 20, 2009

из ul li уберите position: relative;

и ставьте его при событии hover на ul li (ul li:hover),

только для ие6 нужен будет небольшой скриптик чтобы научить его понимать ul li:hover

Юрий · August 25, 2009

из ul li уберите position: relative;
и ставьте его при событии hover на ul li (ul li:hover),
только для ие6 нужен будет небольшой скриптик чтобы научить его понимать ul li:hover

Спасибо, решение оказалось проще чем я думал. Скриптик есть для IE6

Sign In

Выпадающее меню с помощью тегов <ul>, <li>

Question

Юрий

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

hel

Link to comment

Share on other sites

Юрий

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information