В рамках изучения JQuery, создал анимированное меню:
(сразу замечу, это первый опыт и за неоптимальность кода сильно не ругайте). Все в общем работает, кроме нюансика, в IE - при открытии списка подпунктов, пункты меню разъезжаются. На локальной машине это исправить удалось (overflow:hidden), но при внедрении на ucoz обрезается подменю.
Вот весь код скрипта:
----------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$('#p0').mouseover(function () {
$("#mcont li").hide("slow");
});
//-----------------------------------
$('#p1').mouseover(function () {
if ($("#p1 li:first").is(":hidden")) {
$("#p1 li").show("slow");
}
$("#p2 li").hide("slow");
$("#p3 li").hide("slow");
});
$('#p1 li').click(function () {$("#p1 li").hide("slow"); });
//-----------------------------------
$('#p2').mouseover(function () {
if ($("#p2 li:first").is(":hidden")) {
$("#p2 li").show("slow");
}
$("#p1 li").hide("slow");
$("#p3 li").hide("slow");
});
$('#p2 li').click(function () {$("#p2 li").hide("slow"); });
//-----------------------------------
$('#p3').mouseover(function () {
if ($("#p3 li:first").is(":hidden")) {
$("#p3 li").show("slow");
}
$("#p2 li").hide("slow");
$("#p4 li").hide("slow");
});
$('#p3 li').click(function () {$("#p3 li").hide("slow"); });
//--------------------------------
$('#p4').mouseover(function () {
if ($("#p4 li:first").is(":hidden")) {
$("#p4 li").show("slow");
}
$("#p3 li").hide("slow");
$("#p5 li").hide("slow");
});
$('#p4 li').click(function () {$("#p4 li").hide("slow"); });
//--------------------------------
$('#p5').mouseover(function () {
if ($("#p5 li:first").is(":hidden")) {
$("#p5 li").show("slow");
}
$("#p4 li").hide("slow");
$("#p6 li").hide("slow");
});
$('#p5 li').click(function () {$("#p5 li").hide("slow"); });
//--------------------------------
$('li.p2e').mouseover(function () {
$("#p1 li").hide("slow");
$("#p2 li").hide("slow");
$("#p3 li").hide("slow");
$("#p4 li").hide("slow");
$("#p5 li").hide("slow");
});
//--------------------------------
$(document.body).click(function () {
$("#p1 li").hide("slow");
$("#p2 li").hide("slow");
$("#p3 li").hide("slow");
$("#p4 li").hide("slow");
$("#p5 li").hide("slow");
});
$("#mcont li").mouseover(function () {
$(this).css({background:'#f7f6f5'});
$("#mcont div").css({width:'100px'});
});
$("#mcont li").mouseout(function () {
$(this).css({background:'#ffffff'});
});
});
</script>
<style>
#p1 li, #p2 li, #p3 li, #p4 li, #p5 li { position:relative;top:0px;left:0px;background:#ffffff; margin:1px; width:180px;border-top:1px solid
#cccccc;hheight:25px; display:none; clear:both;z-index:15; }
#p0, #p1, #p2, #p3, #p4, #p5 {float:left;width:100px;border:0px solid #cccccc;text-align:center;cursor:pointer;pposition:fixed;
ooverflow:hidden;}
#mcont {position:absolute;border-bottom:0px solid #ffcccc;padding:5px;clear:both;width:800px;z-index:10;}
#next {position:relative;top:40px;width:100%;}
.p2e {background:#cccccc;}
li {list-style-type:none;}
</style>
<!--[if IE]>
<style>
#p0, #p1, #p2, #p3, #p4, #p5 {overflow:hidden;}
</style>
<![endif]-->
</head>
<body>
<div id='mcont'>
<div id='p0' style="margin-left:10px;">* <a href="http://kachay.ucoz.org">Главная</a> *</div>
<div id='p1'>* Новости *
<li><a href=''>RSS News</a></li>
<li>Наши информеры</li>
<li>Архив Новостей</li>
<li class=p2e>x</li>
</div>
<div id=p2>* Девушки *
<li><a href=''>Импортные</a></li>
<li>Русские</li>
<li>Эротические модели</li>
<li><a href=''>С большой грудью</a></li>
<li>Обложки Playboy</li>
<li>Модели Digital.com</li>
<li class=p2e>x</li>
</div>
<div id=p3>* Flash игры *
<li><a href=''>Стена</a></li>
<li>Головоломка</li>
<li>Распутай клубок</li>
<li>Аэрохоккей</li>
<li>Подборка флэш игр</li>
<li>Flash игры от Ucoz</li>
<li class=p2e>x</li>
</div>
<div id=p4>* Картинки *
<li><a href='http://rendfoto.3dn.ru'>100000 фото обо всем</a></li>
<li>Случайное фото на KP.ru</li>
<li>Виртуальная третьяковка</li>
<li>Анимационные .gif</li>
<li class=p2e>x</li>
</div>
<div id=p5>* Форум *
<li><a href=''>Спорт</a></li>
<li>События</li>
<li>Газетные заголовки</li>
<li>История развития сайта</li>
<li class=p2e>x</li>
</div>
</div> <!--mcont-->
<div id=next>
<hr>
<li>Произвольный
<li>текст
<li>здесь
</div>
</body>
</html>
-----------------------------
внедрение на ucoz -
http://kachay.ucoz.org/search/web
----------------------------
подскажите, плиз, какое свойство CSS надо применить для IE(и ОЧЕНЬ желательно динамически с применением JQuery), чтобы и пункты меню не разъезжались и подменю не обрезалось
