Помогите с CSS!!! (original) (raw)

Требуется помощь!

Решил сделать вот такое меню:
http://www.alistapart.com/articles/hybrid/
всё делал по статье, но прямо с самого начала у меня не появились в верхней строке меню прямоугольники со срезанными углами (вернее, прямоугольники появлялись, а вот как у них углы срезать - я не понял), но это, в принципе, некритично, но самое главное - при наведении мышки на пункт, выпадает подменю, но как только мышку убираю, оно исчезает - не успеваю довести до ссылки... Оно сначала, вроде как работало, а потом перестало, но момент я не заметил, а потом не смог найти, где исправить.

пример непосредственно самого меню из статьи:
http://www.alistapart.com/d/hybrid/hybrid-4.html

#divNav {
background: transparent url(itsco.jpg) no-repeat top left;
margin: 0;
padding: 0;
height: 5px; /* размер картинки фона меню */
width: 100%; /* ширина меню */
}

#nav {
position: relative;
top: 5px; /* расстояние от верха до меню */
height: 80px;
width: 100%;
}

#nav li ul, #nav li ul {
margin: 0;
padding: 0;
}

#nav a {
text-decoration: none;
}

#nav li { /*float the main list items*/
margin: 0;
float: left;
display: block;
padding-right: 5px;
}

#nav li ul {
display: none;
}

#nav li.off ul, #nav li.on ul { /*put the subnav below*/
position: absolute;
top: 25px;
left: 0;
padding-top: 0px;
background: #990000;
height: 24px;
width: 80%;
padding-left: 900px;
}

#nav li.on ul {
background: #999999;
position: absolute;
top: 25px;
left: 0;
padding-top: 0px;
height: 24px;
width: 80%;
padding-left: 900px;
}

#nav li.on:hover ul, #nav li.over ul { /*for ie*/
background: #990000;
}

#nav li a {
color: #990000;
font-weight: bold;
display: block;
width: 110px;
padding-left: 5px;
}

#nav li.on a {
color: #999999;
}

#nav li.on ul a, #nav li.off ul a {
border: 0;
float: left; /*ie doesn't inherit the float*/
color: #999999;
width: auto;
margin-right: 15px;
}

#nav li.on:hover ul a, #nav li.over ul li a { /*for ie - the specificity is necessary*/
background: #990000;
}

#nav li.on ul {
display: block;
}

#nav li.off:hover ul, #nav li.over ul {
display: block;
z-index: 6000;
}

#nav li.off a:hover, #nav li.on a:hover {
color: #999999;
}

/*do the image replacement*/
/*
#nav li span {
position: absolute;
left: -9384px;
}
*/
#li1 a, #li2 a, #li3 a, #li4 a, #li5 a, #li6 a, #li7 a, #li8 a {
display: block;
position: relative;
height: 20px;
width: 100px;
background: url(fon.jpg) ; /*contains all hover states*/
}

/*active area - for this demo - the code could be based on a body class, and probably work better. */

#li3.on a {
background-position: -204px -37px;
} /*add selectors for the other li's and background-positions*/

/*hover states*/

#li1 a:hover, #li1:hover a, #li1.over a {
background-position: 0 -73px;
}

#li2 a:hover, #li2:hover a, #li2.over a {
background-position: -102px -73px;
}

#li3 a:hover, #li3:hover a, #li3.over a {
background-position: -204px -73px;
}

#li4 a:hover, #li4:hover a, #li4.over a {
background-position: -306px -73px;
}

#li5 a:hover, #li5:hover a, #li5.over a {
background-position: -408px -73px;
}

#li6 a:hover, #li6:hover a, #li6.over a {
background-position: -510px -73px;
}

#li7 a:hover, #li7:hover a, #li7.over a {
background-position: -612px -73px;
}

#li8 a:hover, #li8:hover a, #li8.over a {
background-position: -714px -73px;
}

/*subnav formatting*/

#nav li.off ul a, #nav li.on ul a {
display: block;
background: #990000; /* цвет фона пунктов меню */
color: #fff; /* цвет шрифта */
font-family: Palatino Linotype; /* шрифт пунктов меню */
font-size: normal;
}

#nav li.on ul a {
background: #999999;
}

В фаерфоксе ещё бол-мен нормально видно, в IE перекашивает всё, что только можно, особенно, если разрешение меньше 1152*864:
http://www.itco.ru/menu/menu.html
Подскажите, что и где не так? Может что-то вообще лишнее, или наоборот, дописать чего надо?

Надо: по-возможности ресайзить под разрешение и выводить меню третьего пункта в строке подменю строкой, а не столбиком