0

我在一个网站上工作，当然，我在 IE 上遇到了一些问题。问题出在我创建的下拉菜单中：

这是当我将鼠标悬停在菜单项上时它的外观（以及它在除 IE 之外的所有浏览器中的外观）：

在此处输入图像描述

这是它在 IE9（和 8 也是）中的样子：

在此处输入图像描述

菜单似乎没有超出父级的范围。

这是菜单的结构：

<div id="nav-bar">
<div id="menu">
    <div class="menu-item" id="sort">
        <div class="nav-item" id="nav-item-sort">Ordina per</div>
        <div class="top-down" id="top-down-sort">
            <div class="top-down-item sort" data-sort=''>Niente</div>
            <div class="top-down-item sort" data-sort='Titolo'>Titolo</div>
            <div class="top-down-item sort" data-sort='Autore'>Autore</div>
            <div class="top-down-item sort" data-sort='Casa_Editrice'>Casa Editrice</div>
            <div class="top-down-item sort" data-sort='Prezzo'>Prezzo</div>
        </div>
    </div>
</div>
<div class="menu-item" id="category">
    <div class="nav-item" id="nav-item-category">Categoria</div>
    <div class="top-down" id="top-down-category">
        <div class="top-down-item category" data-cat=''>Tutte</div>
        <div class="top-down-item category" data-cat='Giallo'>Gialli</div>
        <div class="top-down-item category" data-cat='Fantasy'>Fantasy</div>
        <div class="top-down-item category" data-cat='Horror'>Horror</div>
        <div class="top-down-item category" data-cat='Tecnologia'>Tecnologia</div>
        <div class="top-down-item category" data-cat='Sport'>Sport</div>
    </div>
</div>
<div style="clear: both;"></div>

这是菜单的样式：

div#nav-bar {
    width: 100%;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    height: 35px;
    text-align: left;
    border: 2px solid black;
    border-right: none;
    border-left: none;
}

div#menu {
    clear: both;
    float: left;
    display: inline-block;
    z-index: 10;
}

div.nav-item {
    display: inline-block;
    zoom: 1;
    *display: inline;
    height: 28px;
    border-left: 1px solid black;
    border-right: 1px solid black;
    width: 140px;
    text-align: center;
    padding-top: 7px;
    padding-left: 0px;
    padding-right: 0px;
    margin: 0px 0px 0px 0px;
}

div.top-down {
    position: absolute;
    width: 140px;
    text-align: center;
    left: -1px;
    display: none;
    z-index: 10;
    border-left: 1px solid rgba(0, 0, 0, 0);
}

这是处理菜单的javascript代码（使用jQuery）：

$("div.menu-item").mouseenter(function(e){
    var id = $(this).attr("id");
    cur_menu = id;
    var ni = $("div#nav-item-" + id);
    ni.addClass("selected");
    $("div#top-down-" + id).stop().slideDown(100);
});

$("div.menu-item").mouseleave(function(e){
    var id = $(this).attr("id");
    $("div#top-down-" + id).stop().slideUp(100, function(){
        $("div#nav-item-" + id).removeClass("selected");
    });
});

...我究竟做错了什么？？

4

0 回答 0