помогите с меню!

[-O-J-A-]

такок вот срочное дело, есть меню, как сделать в нём что-бы в разделе показывался actice link, в подразделе подсвечивался выбраный hover

и как сделать чтобы при наведение на последний пункт содержимое не вываливалось из блока.

HTML:

<ul id="cssmenu">

<li><a href="#" id="hz1">Главная</a>

</li>

<li><a href="#" id="hz2">Компания</a>

<ul>

<li style="width:450px;>

<a href="#"></a>

<a href="#">История компании</a>

<a href="#">Административный менеджмент</a>

<a href="#">Технический менеджмент</a>

</li>

</ul>

</li>

<li><a href="#" id="hz3">Яхта отрада</a>

<ul>

<li style="width:370px;>

<a href="#"></a>

<a href="#">Описание яхты</a>

<a href="#">Техн. параметры</a>

<a href="#">Фотографии</a>

<a href="#" id="underl">Тур по яхте</a>

</li>

</ul>

</li>

<li><a href="#" id="hz4">Строящиеся яхты</a></li>

<li><a href="#" id="hz5">Новости</a></li>

<li><a href="#" id="hz6">Доп. информация</a>

<ul margin-padding:100px;>

<li style="width:340px;">

<a href="#">Карта водных путей</a>

<a href="#">Фотографии достопримечательностей</a>

</li>

</ul>

</li>

<li><a href="#" id="hz7">Контакты</a></li>

CSS:

ul#cssmenu{

width:562px;

margin:0;

padding:0;

list-style:none;

height:29px;

font-family:Tahoma Regular;

font-size:11px;

color:#000000;

}

ul#cssmenu li{

margin:0;

border:0 none;

padding:0;

float:left;

display:inline;

list-style:none;

position:relative;

height:30px;

}

ul#cssmenu ul{

margin:0;

padding:0;

width:160px;

list-style:none;

display:none;

position:absolute;

top:30px;left:0;

}

ul#cssmenu ul:after{

clear:both;

display:block;

content:".";

height:0;

visibility:hidden;

}

ul#cssmenu ul li{

width:150px;

float:left;

display:block !important;

display:inline;

}

/* Main Menu */

ul#cssmenu a{

border:0px;

padding:0px 10px;

float:left;

color:#000000;

display:block;

font-size:12px;

font-family:Tahoma Regular;

text-decoration:none;

}

/* Main Menu Hover */

#hz1:hover{

font-family:Tahoma Regular;

color:#ffffff;

font-size:12px;

padding-bottom:2px;

background:url('js/hov1.png');

}

#hz2:hover{

font-family:Tahoma Regular;

color:#ffffff;

font-size:12px;

padding-bottom:2px;

background:url('js/hov2.png');

}

#hz3:hover{

font-family:Tahoma Regular;

color:#ffffff;

font-size:12px;

padding-bottom:2px;

background:url('js/hov3.png');

}

#hz4:hover{

font-family:Tahoma Regular;

color:#ffffff;

font-size:12px;

padding-bottom:2px;

background:url('js/hov4.png');

}

#hz5:hover{

font-family:Tahoma Regular;

color:#ffffff;

font-size:12px;

padding-bottom:2px;

background:url('js/hov5.png');

}

#hz6:hover{

font-family:Tahoma Regular;

color:#ffffff;

font-size:12px;

padding-bottom:2px;

background:url('js/hov6.png');

}

#hz7:hover{

font-family:Tahoma Regular;

color:#ffffff;

font-size:12px;

padding-bottom:2px;

background:url('js/hov7.png');

}

/* Second Menu */

ul#cssmenu li:hover li a,ul#cssmenu li.iehover li a{

font-family:Tahoma Regular;

color:#349DD3;

font-size:12px;

background:url('');

}

/* Second Menu Hover */

ul#cssmenu li:hover li a:hover,ul#cssmenu li:hover li:hover a,ul#cssmenu li.iehover li a:hover,ul#cssmenu li.iehover li.iehover a{

font-family:Tahoma Regular;

font-size:12px;

color:#349DD3;

background:url('');

float:left;

text-decoration:underline;

}

ul#cssmenu ul ul{

display:none;

position:absolute;

top:0;

}

ul#cssmenu li:hover ul ul,ul#cssmenu li.iehover ul ul{

display:none;

}

ul#cssmenu li:hover ul,ul#cssmenu ul li:hover ul,ul#cssmenu li.iehover ul,ul#cssmenu ul li.iehover ul{

display:block;

}

а вот js:

function cssmenuhover()

{

if(!document.getElementById("cssmenu"))

return;

var lis = document.getElementById("cssmenu").getElementsByTagName("LI");

for (var i=0;i<lis.length;i++)

{ lis.onmouseover=function(){this.className+=" iehover";}

lis.onmouseout=function() {this.className=this.className.replace(new RegExp(" iehover\\b"), "");}

}}if (window.attachEvent)

window.attachEvent("onload", cssmenuhover);

Edited July 10, 2010 by -O-J-A-

[psywalker]

Код в спец.теги для него. На будущее.

А по поводу задачи ничего не понятно, что именно нужно, приведи скрины с объяснениями.

[-O-J-A-]

вот вылазит

http://s48.radikal.ru/i120/1007/8f/5d328fbb40c2.jpg

а тут вместо одной ссылки подсвечивает все

http://s49.radikal.ru/i126/1007/cc/e741a78ac6cc.jpg

ещё, не выделяет нужную кнопу, если нахожусь на выбраной странице,

делаю так:

#hz1:active{ 
font-family:Tahoma Regular;
color:#ffffff; 
font-size:12px; 
padding-bottom:2px;
background:url('js/hov1.png');
}

[-O-J-A-]

[psywalker]

1) Вылазиет, потому-что свёрстано криво, много грязи и лишнего. Заново надо переделать всё пошагово.

2) Подсвечивается все ссылки из-за вот этого может быть?

ul#cssmenu li:hover li a:hover,ul#cssmenu li:hover li:hover a,ul#cssmenu li.iehover li a:hover,ul#cssmenu li.iehover li.iehover a{

Дело в том, что специфичность селекторов тут больше, чем просто #hz5:hover

3) А не выделяет, потому-что смотри пункт 1