CSS Horizontal hover navigation disappearing in IE 7

Question

In essence, I've been following Nick's code from A List Apart:

http://www.alistapart.com/articles/horizdropdowns/

I've made a few alterations, mainly - I'm using background images instead of a background color. Everything works as expected, except that in IE7, the hovering list (on the right) disappears when trying to hover over one of the child items.

Alterations are as follows:

#sidebar ul.subnav {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 276px;
}

#sidebar ul.subnav li {
    position: relative;
}

#sidebar ul.subnav li ul {
    position: absolute;
    left: 275px;
    top: 0;
    display: none;
    width: 276px;
    height: 58px;
    z-index: 300;
}

#sidebar ul.subnav li a {
    display: block;
    text-decoration: none;
    color: #444444;
    height: 58px;
    line-height: 58px;
    text-indent: 35px;
    font-size: 14px;
    z-index: 300;
}

#sidebar ul.subnav li:hover ul { display: block; }
#sidebar ul.subnav li.over ul { display: block; }
#sidebar li.sub-item-1 { background: url('images/subnav-1.jpg') 0 no-repeat; }
#sidebar li.sub-item-2 { background: url('images/subnav-2.jpg') 0 no-repeat; }
#sidebar li.sub-item-3 { background: url('images/subnav-3.jpg') 0 no-repeat; }
#sidebar li.sub-item-4 { background: url('images/subnav-4.jpg') 0 no-repeat; }

#sidebar ul.subnav li.sub-item-1 ul li { background: url('images/rev-subnav-1.jpg') 0 no-repeat; }
#sidebar ul.subnav li.sub-item-2 ul li { background: url('images/rev-subnav-2.jpg') 0 no-repeat; }
#sidebar ul.subnav li.sub-item-3 ul li { background: url('images/rev-subnav-3.jpg') 0 no-repeat; }
#sidebar ul.subnav li.sub-item-4 ul li { background: url('images/rev-subnav-4.jpg') 0 no-repeat; }

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End */

Here's the HTML, it hasn't changed too much:

         <ul class="subnav"> 
            <li class="sub-item-1"><a href="#">Nav Item 1</a>
                <ul> 
                    <li><a href="#">Link 1</a></li> 
                    <li><a href="#">Link 2</a></li> 
                    <li><a href="#">Link 3</a></li> 
                </ul> 
            </li> 
            <li class="sub-item-2"><a href="#">Nav Item 2</a> 
                <ul> 
                    <li><a href="#">Link 1</a></li> 
                    <li><a href="#">Link 2</a></li> 
                    <li><a href="#">Link 3</a></li> 
                </ul> 
            </li> 
            <li class="sub-item-3"><a href="#">Nav Item 3</a> 
                <ul> 
                    <li><a href="#">Link 1</a></li> 
                    <li><a href="#">Link 2</a></li> 
                    <li><a href="#">Link 3</a></li> 
                </ul> 
            </li>
            <li class="sub-item-4"><a href="#">Nav Item 4</a> 
                <ul> 
                    <li><a href="#">Link 1</a></li> 
                    <li><a href="#">Link 2</a></li> 
                    <li><a href="#">Link 3</a></li> 
                </ul> 
            </li> 
        </ul>

I tried following some of the advice in the other topics here, but none seemed to help. I'm probably missing something minor at this point. Anyone have any ideas?

Edit: The content area that the hovered navigation was covering is causing the issue.

CSS is as follows:

#content {
    width: 641px;
    min-height: 300px;
    position: absolute;
    top: 0;
    left: 278px;
}

If I remove this, the navigation works fine. I'll have to find a way to style that content area otherwise.

Edit #2:

Adding a background color to this content element (which sits behind the dropdown) fixes the issue in IE7.

Answer 1

The Following works for me.

background: url("http://www.kvammetravel.com/images/menu_background.gif") repeat-x scroll left top transparent;

Check screenshot below

Works in IE7. If that still doesn't work for you, you need to post your working code in jsfiddle.net so i can take a look.

Answer 2

Simply adding a background colour makes it work in IE7:

#sidebar ul.subnav li a {
    background: #fff
}

Live Demo (edit)

If this doesn't work on your actual page, I have one question for you.

What doctype are you using on your page? (show the first lines of your file)