Question

在这里有一个奇怪的，我只是设法清除了：

我有css代码，可生成多级下拉菜单。我决定在同一页面上为日历日期选择器实现一些jQuery。得到了这个工作，但只是刚刚注意到css下拉菜单已停止只在IE 6中工作（我知道，旧的，2％的使用率，但我想到达底部）。

无论如何，经过大量的反复试验后，我发现这一切都取决于<script src="/libs/jquery.min.js"></script>行的位置。似乎如果在css之后调用jquery库（头部中的样式表和页面特定的东西），css不起作用，当它们悬停时不会出现菜单。但是，如果我在css上面包含了jquery库，那么一切正常。

只是想知道，有没有关于.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

我不确定您的代码是如何使用的，但是很多IE6 CSS菜单使用javascript添加帮助类来帮助处理非链接项上的悬停状态（例如，不是标记的html标记）。如果你没有看到更多，我猜想jQuery的位置正在影响其他JavaScript。

可以粘贴菜单的html / css吗？

Answer 2

也许这有点偏离主题，但你的例子中的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;}

然而，更重要的是它会减慢页面渲染速度（especially in older browsers），因为选择器都是从右到左解释的。

通过向菜单列表和项添加特定于级别的类可以轻松解决问题，因此选择器将是这样的：

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

等等。

jQuery js文件在css样式表之后链接时破坏了css代码

2 个答案: