<html xmlns=" http://www.w3.org/1999/xhtml " lang="zh-CN">
<голова>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>демонстрация CSS-меню</title>
<style type="text/css">
<!--
*{маржа:0;отступ:0;граница:0;}
тело {
семейство шрифтов: Arial, 宋体, с засечками;
размер шрифта: 12 пикселей;
} #nav {
высота строки: 24 пикселя; тип стиля списка: нет фона: #666;
} #навигация {
дисплей: ширина блока: 80 пикселей; выравнивание текста: по центру;
} #nav a:link {
цвет: #666; оформление текста: нет;
}
#nav a:visited {
цвет: #666;текстовое оформление: нет;
}
#nav a:hover {
цвет: #FFF; оформление текста: нет; вес шрифта: жирный;
} #navli {
плавающий: слева; ширина: 80 пикселей фон:#CCC;
}
#nav li a:hover{
фон:#999;
}
#navliul{
высота строки: 27 пикселей, тип списка: нет; выравнивание текста: по левому краю;
слева: -999em; ширина: 180 пикселей; позиция: абсолютная;
}
#nav li ul li{
плавающий: слева; ширина: 180 пикселей;
фон: #F6F6F6;
} #nav li ul a{
дисплей: блок; ширина: 156 пикселей; выравнивание текста: по левому краю;
} #nav li ul a:link {
цвет: #666; оформление текста: нет;
}
#nav li ul a:visited {
цвет: #666;текстовое оформление: нет;
}
#nav li ul a:hover {
цвет: # F3F3F3; оформление текста: нет; вес шрифта: нормальный;
фон:#C00;
} #nav li:hover ul {
слева: авто;
}
#nav li.sfhover ul {
слева: авто;
}
#содержание {
ясно: слева;
} -->
</стиль> <script type=text/javascript><!--//--><![CDATA[//><!--
функция менюFix() {
var sfEls = document.getElementById("nav").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onMouseDown=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onMouseUp=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp("( ?|^)sfhover\b"), "");
}
}
}
window.onload=menuFix; //--><!]]></script> </голова>
<тело> <ul id="nav">
<li><a href="#">Представление продукта</a>
<ул>
<li><a href="#">Товар 1</a></li>
<li><a href="#">Товар 1</a></li>
<li><a href="#">Товар 1</a></li>
<li><a href="#">Товар 1</a></li>
<li><a href="#">Товар 1</a></li>
<li><a href="#">Товар 1</a></li>
</ul>
</li>
<li><a href="#">Введение в сервис</a>
<ул>
<li><a href="#">Сервис 2</a></li>
<li><a href="#">Сервис 2</a></li>
<li><a href="#">Сервис 2</a></li>
<li><a href="#">Сервис 2Сервис 2</a></li>
<li><a href="#">Сервис два, сервис два, сервис два</a></li>
<li><a href="#">Сервис 2</a></li>
</ul>
</li>
<li><a href="#">Истории успеха</a>
<ул>
<li><a href="#">Случай 3</a></li>
<li><a href="#">Дело</a></li>
<li><a href="#">Случай 3Случай 3</a></li>
<li><a href="#">Случай третийСлучай третийСлучай третий</a></li>
</ul>
</li>
<li><a href="#">О нас</a>
<ул>
<li><a href="#">Мы четверо</a></li>
<li><a href="#">Мы четверо</a></li>
<li><a href="#">Мы четверо</a></li>
<li><a href="#">Мы четверо 111</a></li>
</ul>
</li> <li><a href="#">Онлайн-демонстрация</a>
<ул>
<li><a href="#">Демо</a></li>
<li><a href="#">Демо</a></li>
<li><a href="#">Демо</a></li>
<li><a href="#">ДемоДемоДемо</a></li>
<li><a href="#">ДемоДемоДемо</a></li>
<li><a href="#">Демо</a></li>
<li><a href="#">ДемоДемоДемо</a></li>
<li><a href="#">ДемоДемоДемоДемо</a></li>
</ul>
</li>
<li><a href="#">Свяжитесь с нами</a>
<ул>
<li><a href="#">КонтактКонтактКонтактКонтакт</a></li>
<li><a href="#">КонтактКонтакт</a></li>
<li><a href="#">Связаться</a></li>
<li><a href="#">Связаться</a></li>
<li><a href="#">Связаться</a></li>
<li><a href="#">КонтактКонтакт</a></li>
<li><a href="#">КонтактКонтакт</a></li>
</ul>
</li> </ul> </тело>
</html> | 