Показать сообщение отдельно
  #1 (permalink)  
Старый 08.08.2008, 13:48
Аватар для scuter
Профессор
Отправить личное сообщение для scuter Посмотреть профиль Найти все сообщения от scuter
 
Регистрация: 14.03.2008
Сообщений: 169

меню на CSS не работает в IE
я собрал менюшку чисто на CSS,
html---
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="tpl.css" rel="stylesheet" type="text/css" />
<title>Untitled Document</title>
</head>

<body>
<ul class="m">
		<li><a href="#">Item 1</a>
				<ul>
					<li><a href="#">Item 1.1</a></li>
					<li><a href="#">Item 1.2</a></li>
					<li><a href="#">Item 1.3</a></li>
					<li><a href="#">Item 1.4</a></li>
				</ul>
		</li>
		<li><a href="#">Item 2</a></li>
		<li><a href="#">Item 3</a>
				<ul>
					<li><a href="#">Item 3.1</a>
							<ul>
								<li><a href="#">Item 3.1.1</a></li>
								<li><a href="#">Item 3.1.2</a></li>
								<li><a href="#">Item 3.1.3</a></li>
							</ul>
					</li>
					<li><a href="#">Item 3.2</a></li>
					<li><a href="#">Item 3.3</a></li>
					<li><a href="#">Item 3.4</a></li>
				</ul>
		</li>
		<li><a href="#">Item4</a>
				<ul>
					<li><a href="#">Item 4.1</a>
							<ul>
								<li><a href="#">Item 4.1.1</a></li>
								<li><a href="#">Item 4.1.2</a></li>
								<li><a href="#">Item 4.1.3</a></li>
							</ul>
					</li>
					<li><a href="#">Item 4.2</a></li>
					<li><a href="#">Item 4.3</a></li>
					<li><a href="#">Item 4.4</a>
							<ul>
								<li><a href="#">Item 4.4.1</a></li>
								<li><a href="#">Item 4.4.2</a></li>
								<li><a href="#">Item 4.4.3</a></li>
							</ul>
					</li>
				</ul>
		</li>
	</ul>
</body>
</html>

css----
Код:
ul.m{margin:0;padding:0;list-style-type:none;font-size:100%;cursor:default;width:auto;}
ul.m li{margin:0;padding:0;list-style-type:none;font-size:100%;position:relative;text-align:left;cursor:pointer;width:8em;float:left;}
ul.m ul{margin:0;padding:0;list-style-type:none;font-size:100%;z-index:1020;cursor:default;width:8.2em;position:absolute;left:-1000em;border:1px solid #CCC;}
ul.m li:hover ul, ul.m li:focus ul{left:auto;}
ul.m li:hover ul ul, ul.m li:focus ul ul{left:-1000em;}
ul.m ul:hover, ul.m ul:focus{left:auto;}
ul.m ul li{width:8.2em;}
ul.m ul ul{position:absolute;margin:0 0 0 99%; top:0;}
ul.m ul:hover ul{left:-1000em;}
ul.m ul li:hover ul{left:auto;}
ul.m a{display:block;cursor:pointer;background-color:#EEE; padding:5px 10px;color:#333;text-decoration:none;}
ul.m a:hover,ul.m a:focus{background-color:#33C;color:#FFF;}
эта штука работает во всех новых броузерах кроме IE,
скажите что лучше написать какую нибуть JS,
или что то придумать в CSS для IE,
и главное как это сделать.
Ответить с цитированием