русский
Germany.ru → Foren → Архив Досок→ Webdesign und Hosting

ошибка в меню/ css

286 просмотров Перейти к просмотру всей ветки
04.06.09 13:58
Re: ошибка в меню/ css
 
  scorpi_ завсегдатай
in Antwort NRia 04.06.09 00:45
Убрав несущественное:
В ответ на:
1.html
<!doctype html>
<html lang='de'>
<head>
	<meta http-equiv='content-type' content='text/html; charset=windows-1251'>
	<title>www.aqua-deliciae.de</title>
	<link rel='stylesheet' type='text/css' href='css/layout.css' />
	<!--[if lt IE 7]>
		<link rel='stylesheet' type='text/css' href='css/layout_ie6.css' />
	<![endif]-->
</head>
<body>
	<ul id='nav'>
		<li><a href='index.html'>главная</a></li>
		<li>
			<a href='produkte.html'>продукция</a>
			<ul>
				  <li><a href='wasseranlage.html'>системы очистки воды</a></li>
				  <li><a href='raumreinigungssystem.html'>системы очистки воздуха</a></li>
				  <li><a href='heimsauna.html'>домашняя сауна</a></li>
				  <li><a href='bio-abfallentsorger.html'>измельчитель пищевых отходов</a></li>
				  <li><a href='zepter.html'>посуда Цептер</a></li>
				  <li><a href='wc_dusche.html'>крышка-биде</a></li>
			</ul>
		</li>
		<li><a href='wissenswert.html'>полезное</a></li>
		<li><a href='http://shop.strato.de/epages/61476837.sf'>интернет магазин</a></li>
		<li><a href='anfahrt.html'>карта проезда</a></li>
		<li><a href='kontakt.php'>контакт</a></li>
		<li><a href='impressum.html'>реквизиты</a></li>
	</ul>
	<!--[if lt IE 8]>
		<script type='text/javascript' src='js/jquery-1.3.2.min.js'></script>
		<script type='text/javascript' src='js/menu.js'></script>
	<![endif]-->
</html>


layout.css

* {
	text-decoration: none;
	color: black;
}
ul {
	width: 220px; /* Width of Menu Items */
	list-style-type: none;
}
li {
	position: relative;
}
li ul
{
	display: none;
	position: absolute;
	left: 219px; /* Set 1px less than menu width */
	top: 0;
}
/* Styles for Menu Items */
li a {
	display: block;
}
li a:hover {
	color: red;
	background-color: #ccc;
}
li:hover ul, li ul:hover, .over ul {
	display: block;
}


layout_ie6.css

li {
	float: left;
	height: 1%;
}
li a {
	height: 1%;
}


menu.js

$( function(){
	$('#nav > li').mouseenter( function(){
		$(this).addClass('over');
	});
	$('#nav > li ul').mouseleave( function(){
		$('.over').removeClass('over');
	});
});


PS Используйте HTML 5. Это гарантирует стандартный режим рендеринга во всех браузерах. Используйте conditional comments для исправления IE-багов вместо хаков. Используйте jquery - это радикально сокращает количество кода.
 

Sprung zu