drop down problem

[redeleven]

Hi

Please can someone offer some advice on the drop down nav in right hand column at:

http://www.imageworksweb.co.uk/tcir_web/

Not sure what is the best way to do it...at the moment it is list items for nav, separated by img within li. Is this the best approach?

Also the drop downs do not work in ie7 - please can someone take a look - my brain is addled with trying to sort it....many, many thanks in advance.

Gavin

[Kravvitz]

No. Each <img> shouldn't be in its own <li>. I'd use background images for this, since they are presentational.

Try giving a z-index to the <li>s.

[Paul O'B]

Hi,

IE likes the z-index to descend when you overlap elements like that.

e.g.

        <ul>
            <li style="z-index:10"><a href="#">ABOUT US</a>
                <ul>
                    <li><a href="our-company.html">OUR COMPANY</a></li>
                    <li><a href="our-philosophy.html">OUR PHILOSOPHY</a></li>
                    <li><a href="our-people.html">OUR PEOPLE</a></li>
                </ul>
            </li>
            <li style="z-index:9"> <img src="http://www.imageworksweb.co.uk/tcir_web/resources/nav-about.jpg" /></li>
            <li style="z-index:8"><a href="#">WHAT WE DO</a>
                <ul>
                    <li><a href="analyze.html">ANALYZE</a></li>
                    <li><a href="design.html">DESIGN</a></li>
                    <li><a href="build.html">BUILD</a></li>
                    <li><a href="manage.html">MANAGE</a></li>
                </ul>
            </li>
            <li style="z-index:7"><img src="http://www.imageworksweb.co.uk/tcir_web/resources/nav-what.jpg" /></li>
            <li><a href="#">PROJECTS</a>
                <ul>
                    <li><a href="projects-british-isles.html">BRITISH ISLES</a></li>
                    <li><a href="projects-north-america.html">NORTH AMERICA</a></li>
                </ul>
            </li>
            <li><img src="http://www.imageworksweb.co.uk/tcir_web/resources/nav-projects.jpg" /></li>
            <li><a href="latest-news.html">LATEST NEWS</a></li>
            <li><img src="http://www.imageworksweb.co.uk/tcir_web/resources/nav-news.jpg" /></li>
        </ul>

(inline styles for example only)

However I'm guessing that if you put the image in the background (as Kravvitz suggested above) then you won't have this problem. Just add some padding bottom to the top level list and apply the background image to the bottom of the element.

e.g.Very roughly like this:

#nav ul li.firstimage{
background:#54287d url(http://www.imageworksweb.co.uk/tcir_web/resources/nav-about.jpg) no-repeat left bottom;
padding-bottom:100px
}
#nav ul li li{background:transparent;padding:0}

You will have to class each toplevel list so that you can use a different image for each.