Вроде как нашёл неплохое решение
http://www.joomla15.ru/examples/3iedropdown/index.htmlНо IE6 не работает
Скачал на комп. Открываю index.html в IE6 всё роботает.
Все файлы копирую в файл шаблона. переношу с index.html в index.php Но в IE6 не работает.
Вот мой index.php
<!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="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="<?php echo $this->baseurl ?>/templates/cssdropdownmenu/css/full.css" />
<!--[if IE]>
<style type="text/css">
/*
* Очеловечивание IE6
*/
body {
behavior:url("csshover3.htc");
}
</style>
<![endif]-->
</head>
<body>
<div id="kings_of_classic_rock">
<div class="moduletable">
<ul class="menu">
<li class="parent active"><a href="#Pink Floyd"><span>Pink Floyd</span></a>
<ul>
<li class="parent"><a href="#The Piper at the Gates of Dawn"><span>The Piper at the Gates of Dawn</span></a>
<ul>
<li><a href="#"><span>Astronomy Domine</span></a></li>
<li><a href="#"><span>Lucifer Sam</span></a></li>
</ul>
</li>
<li><a href="#A Saucerful of Secrets"><span>A Saucerful of Secrets</span></a></li>
<li class="parent"><a href="#Animals"><span>Animals</span></a>
<ul>
<li><a href="#Pigs On The Wing (Part 1)"><span>Pigs On The Wing (Part 1)</span></a></li>
<li><a href="#Dogs"><span>Dogs</span></a></li>
</ul>
</li>
<li><a href="#Obscured by Clouds"><span>Obscured by Clouds</span></a></li>
<li><a href="#The Dark Side of the Moon"><span>The Dark Side of the Moon</span></a></li>
<li class="parent"><a href="#The Wall"><span>The Wall</span></a>
<ul>
<li><a href="#In The Flesh?"><span>In The Flesh?</span></a></li>
<li><a href="#The Thin Ice"><span>The Thin Ice</span></a></li>
</ul>
</li>
</ul>
</li>
<li class="parent"><a href="#Creedence Clearwater Revival"><span>Creedence Clearwater Revival</span></a>
<ul>
<li><a href="#Bayou Country"><span>Bayou Country</span></a></li>
<li><a href="#Green River"><span>Green River</span></a></li>
<li class="parent"><a href="#Willy and the Poor Boys"><span>Willy and the Poor Boys</span></a>
<ul>
<li><a href="#Down on the Corner"><span>Down on the Corner</span></a></li>
<li><a href="#It Came Out of the Sky"><span>It Came Out of the Sky</span></a></li>
</ul>
</li>
<li><a href="#Cosmo's Factory"><span>Cosmo's Factory</span></a></li>
<li><a href="#Pendulum"><span>Pendulum</span></a></li>
</ul>
</li>
<li class="parent"><a href="#The Guess Who"><span>The Guess Who</span></a>
<ul>
<li class="parent"><a href="#American Woman"><span>American Woman</span></a>
<ul>
<li><a href="#American Woman"><span>American Woman</span></a></li>
<li><a href="#No Time"><span>No Time</span></a></li>
</ul>
</li>
<li><a href="#Share the Land"><span>Share the Land</span></a></li>
</ul>
</li>
</ul>
</div>
</div>
<div style="clear:both"></div>
<div id="links">
<ul>
<li><a href="css/full.css">Полная версия CSS-файла с комментариями</a></li>
<li><a href="css/tidy.css">CSS-файл</a>, сжатый при помощи <a href="http://csstidy.sourceforge.net">csstidy</a></li>
<li><a href="http://semlabs.co.uk/journal/free-web-design-icon-set">Пиктограммы папок</a></li>
</ul>
</div>
<div id="validators">
<a rel="nofollow" href="http://validator.w3.org/check?uri=referer">
<img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict" height="31" width="88" />
</a>
<a rel="nofollow" href="http://jigsaw.w3.org/css-validator/check/referer">
<img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Правильный CSS!" />
</a>
</div>
<div id="license">
<a rel="license nofollow" href="http://creativecommons.org/licenses/by-sa/3.0/">
<img alt="Creative Commons License" style="border-width: 0pt;" src="http://i.creativecommons.org/l/by-sa/3.0/88x31.png" />
</a>
</div>
</div>
</body>
</html>
Вот templateDetails.xml
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template 1.0//EN" "http://dev.joomla.org/xml/1.5/template-install.dtd">
<install version="1.5" type="template">
<name>cssdropdownmenu</name>
<creationDate></creationDate>
<author></author>
<authorEmail></authorEmail>
<authorUrl></authorUrl>
<version>2.0</version>
<description></description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<filename>css/full.css</filename>
<filename>css/tidy.css</filename>
<filename>csshover3.htc</filename>
<folder>css</folder>
</files>
<positions>
<position>top</position>
</positions>
</install>
Мой CSS такой же как и в ссылке
/*
* Подключение whatever:hover
*
* Чтобы не было проблем с валидацией CSS, лучше подключать библиотеку
* через HTML следующим кодом:
* <!--[if lte IE 6]>
* <style type="text/css">
* body { behavior:url("csshover3.htc"); }
* </style>
* <![endif]-->
* А следующее правило, соответственно, следует удалить
*/
body {
behavior:url("csshover3.htc");
}
/*
* Очистка значений по-умолчанию
*/
ul.menu,
ul.menu ul {
list-style-type: none;
padding: 0;
margin: 0;
}
/*
* Рабочий скелет меню
*
* Задача: Простое появление и исчезание пунктов меню при наведении и исчезновении курсора.
* Стиль не более необходимого для отображения трёхуровневого меню.
* Источник: http://www.xs4all.nl/~peterned/csshover.html
*/
ul.menu ul,
li:hover ul ul { display:none; }
li:hover ul,
li:hover li:hover ul { display:block; }
/*
* Приведение меню к стандартному виду строки с выпадающими пунктами
* Задача: Создать минимально оформленное горизонтальное меню с корректно-функционирующими подпунктами
*/
ul.menu li {
float: left;
position: relative;
}
ul.menu li,
ul.menu ul,
ul.menu li li a {
width: 180pt;
}
ul.menu ul {
position: absolute;
left: 0;
}
ul.menu ul {
clear: left;
}
ul.menu li li {
float: none;
position: relative;
}
ul.menu li li a {
display: block;
}
ul.menu li li ul {
left: 180pt;
}
/*
* Визуальное оформление меню
*/
ul.menu {
font-family: arial, sans-serif;
font-size: 11px;
}
ul.menu li a span {
padding-left: 23px;
}
ul.menu ul {
top: 2em;
z-index: 200;
}
ul.menu a {
text-decoration: none;
line-height: 2;
}
ul.menu li {
background-image: url(../music.png);
background-repeat: no-repeat;
background-position: 1.1% center;
}
ul.menu li.parent {
background-image: url(../folder-closed.png);
}
ul.menu li.parent:hover {
background-image: url(../folder.png);
}
ul.menu li:hover {
background-color: #eee;
}
ul.menu ul {
border: solid 1px #ddd;
background-color: white;
}
ul.menu li li ul {
top: -1px;
}
