Question

I am building a dropdown menu. The problem is, in IE9 the background of the child absolute-positioned element is only visible inside the parent.
Page where you can see the menu: http://darkstar.weblunatix.net/stan/ddmenu – hover over the left red part with “електронен магазин” written
Here is my code:

<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>

From this sample, the “submenu” div has a background only inside the “dropdown”.
My 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;
}

How do I make the submenus visible?

Answer 1

Fixed. The problem was this line of code:

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

The filter in IE9 seems to have a bug in it. Removing this line fixed the problem (and also removed the gradient, of course.. but thats something I can live with).