JQuery JS файл разорвать CSS-код при ссылке после таблицы стилей CSS

Question

У меня тут странный пример, который мне только что удалось отсеять:

У меня есть код css, который выдает многоуровневое выпадающее меню.Я решил реализовать некоторые jQuery на той же странице для выбора даты календаря.Работал, но только что заметил, что раскрывающееся меню css перестало работать только в IE 6 (я знаю, старый, 2% использования, но я хотел бы докопаться до сути).

В любом случае, после долгих проб и ошибок я понял, что все зависит от того, где находится строка <script src="/libs/jquery.min.js"></script>.Похоже, что если библиотека jquery вызывается после css (и таблицы стилей, и специфичные для страниц материалы в разделе head), css не работает, меню не отображается, когда они находятся.Однако, если у меня есть библиотека jquery, включенная над css, все работает нормально.

Просто интересно, есть ли что-то о .js и .css, о которых я не знаю, с точки зрения порядка, в котором ониможно вызвать?

Это код CSS:

(if IE)

body {
behavior: url(csshover.htc);
font-size: 100%;
} 

#stuartFilter ul li {float: left; width: 100%;}
#stuartFilter ul li a {height: 1%;} 

#stuartFilter a, #stuartFilter h2 {
font: bold 11px/16px arial, helvetica, sans-serif;}
(end if)

#stuartFilter a img{border:none;
}

#stuartFilter {
width: auto;
background: rgb(250, 240, 230);
float: left;
}   

#stuartFilter ul {
list-style: none;
margin: 0px;
padding: 3px 0px 0px 0px;
width: 7.5em;
float: left;
background: url(downArrow.png) no-repeat 100% 75%;
}

#stuartFilter a, #stuartFilter h2 {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0px;
padding: 6px 6px;
}

#stuartFilter h2 {
color: #fff;
background: #000;
text-transform: uppercase;
}

#stuartFilter a {
color: #000;
background: rgb(250, 250, 229);
text-decoration: none;
}

#stuartFilter a:hover {
color: #a00;
background: #fff;
}

#stuartFilter li {position: relative;}

#stuartFilter ul ul {
position: absolute; 
top: 100%;
left: 0%;
width: 12em;
}

#stuartFilter ul ul ul {
position: absolute;
top: 0;
left: 100%;
//width: 11em;
}

div#stuartFilter ul ul,
div#stuartFilter ul li:hover ul ul,
div#stuartFilter ul ul li:hover ul ul,
div#stuartFilter ul ul ul li:hover ul ul,
div#stuartFilter ul ul ul ul li:hover ul ul,
div#stuartFilter ul ul ul ul ul li:hover ul ul
{display: none;}

div#stuartFilter ul li:hover ul,
div#stuartFilter ul ul li:hover ul,
div#stuartFilter ul ul ul li:hover ul,
div#stuartFilter ul ul ul ul li:hover ul,
div#stuartFilter ul ul ul ul ul li:hover ul,
div#stuartFilter ul ul ul ul ul ul li:hover ul
{display: block;}

Я только что заметил, что когда я использую неминифицированную версию jquery, она работает нормально.Странно нет?!

Answer 1

Возможно, это немного не по теме, но тот CSS в вашем примере просто нелеп:

div#stuartFilter ul li:hover ul,
div#stuartFilter ul ul li:hover ul,
div#stuartFilter ul ul ul li:hover ul,
div#stuartFilter ul ul ul ul li:hover ul,
div#stuartFilter ul ul ul ul ul li:hover ul,
div#stuartFilter ul ul ul ul ul ul li:hover ul
{display: block;}

Что более важно, однако, это то, что это сильно замедляет рендеринг страницы (, особенно в старых браузерах ), поскольку все селекторы интерпретируются справа налево.

Эту проблему легко решить, добавив классы, зависящие от уровня, в списки и элементы меню, поэтому селекторы будут выглядеть примерно так:

.item_firstlevel:hover .list_secondlevel,
.item_secondlevel:hover .list_thirdlevel

и т. Д.

Answer 2

Я не уверен, как используются ваши коды, но многие CSS-меню IE6 использовали javascript для добавления вспомогательного класса, который помогает при наведении состояний на элементы, не являющиеся ссылками (например, HTML-теги, которые не являются тегами ). Не видя больше, я бы предположил, что положение jQuery влияет на тот другой JavaScript, если он у вас есть.

Можете ли вы вставить html / css для своего меню?