0

ドロップダウンメニューを作成しています。問題は、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;
}

サブメニューを表示するにはどうすればよいですか？

4

1 に答える 1

0

修理済み。問題は次のコード行でした。

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

IE9 のフィルタにはバグがあるようです。この行を削除すると、問題が修正されました（もちろん、グラデーションも削除されました..しかし、それは私が一緒に暮らすことができるものです）。

于 2013-01-24T11:45:00.753 に答える