Question

我正在构建一个下拉菜单。问题是，在IE9中，子绝对定位元素的背景仅在父内部可见。您可以在其中看到菜单的页面：http://darkstar.weblunatix.net/stan/ddmenu - 将鼠标悬停在左侧红色部分上并写上“електроненмагазин” 这是我的代码：

<div class="maindrop">
        <span id="maindrop">&nbsp;</span>
        <div id="dropdown">
                <div class="dropel">
                    <a href="#"><span>Периферия</span></a>
                </div>
                <div class="dropel">
                    <a href="#"><span>Мултимедия</span></a>
                </div>
                <div class="dropel">
                    <a href="#"><span>Принтери и плотери</span></a>
                    <div class="submenu">
                        <a href="#"><span>test 1, test 2</span></a>
                        <a href="#"><span>Тест 1, Тест 2</span></a>
                        <a href="#"><span>Тест 1, Тест 2</span></a>
                        <a href="#"><span>Тест 1, Тест 2</span></a>
                        <a href="#"><span>Тест 1, Тест 2</span></a>
                        <a href="#"><span>Тест 1, Тест 2</span></a>
                    </div>
                </div>
                <div class="dropel">
                    <a href="#"><span>Мултифункционални устройства</span></a>
                </div>
        </div>
</div>

从此示例中，“子菜单”div仅在“下拉列表”内部具有背景。我的CSS：

.maindrop {
    cursor: pointer;
    display: block;
    height: 63px;
    left: 178px;
    position: relative;
    top: 88px;
    width: 300px;
}
.maindrop #maindrop {
    cursor:pointer;
}
.maindrop:hover #dropdown {
    display:block;
}
#dropdown {
    display:none;
    font-family:Tahoma, Geneva, sans-serif;
    position:absolute;
    left:0;
    top:100%;
    min-width:300px;
    border-radius:5px 0 0 5px;
    border-radius:\0/;
    border:1px solid silver;
    opacity:0.9;
    filter: alpha(opacity=90);
    box-shadow:0 0px 10px grey;
    background: #d22125;
background: -moz-linear-gradient(top,  #d22125 0%, #d22125 23%, #000000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d22125), color-stop(23%,#d22125), color-stop(100%,#000000));
background: -webkit-linear-gradient(top,  #d22125 0%,#d22125 23%,#000000 100%);
background: -o-linear-gradient(top,  #d22125 0%,#d22125 23%,#000000 100%);
background: -ms-linear-gradient(top,  #d22125 0%,#d22125 23%,#000000 100%);
background: linear-gradient(to bottom,  #d22125 0%,#d22125 23%,#000000 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d22125', endColorstr='#000000',GradientType=0 );
}
.dropel a {
    text-decoration: none;
}
.dropel > a span {

    color: white;
    display: block;
    height: 14px;
    opacity: 1;
    padding: 9px 5px 10px 30px;
    text-align: left;
    text-shadow: 1px 1px black;
    font-weight:bold;
    font-size:10pt;
    border-radius:5px 0 0 5px;
    border-radius:\0/;
}
.dropel > a span:hover {
    background-color:#f8f8f8;
    color:black;
    text-shadow:none;
}
.dropel {
    position:relative;
}
.submenu {
    position:absolute;
    left:200px;
    top:0;
    width:200px;
    background-color:red;
    height:100px;
}

如何使子菜单可见？

Answer 1

固定。问题在于这行代码：

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d22125', endColorstr='#000000',GradientType=0 );

IE9中的过滤器似乎有一个错误。删除这一行修复了问题（当然也删除了渐变..但这就是我可以忍受的东西）。

仅限IE9：Subitem div背景仅在父元素内可见

1 个答案: