Lien chevauche une div en position absolute

Bonjour,

J'ai problème sans solution: J'ai une liste de pays sous forme de <ul>. Dans qqs uns de ces <li>, j'ai un lien <voir les provinces> permettant d'afficher un sous menu. Mon problème est le suivant: ce sous menu est dans une <div> en position absolute et l'un des liens <voir les provinces> se trouvant en dessous, chevauche ce sous-menu sous IE6 et 7

La css:

body { font-size: 11px; font-family: Verdana, Geneva, sans-serif; }
.links-list { margin: 0 0 2em 0; padding: 0 0 0 0.4em; }
.links-list li {
	list-style-type: none;
	margin: 0 0 0 0.4em;
	padding: 0 0 0 18px;
	background: url(../images/puce-links-list.gif) no-repeat 0 0.4em;
	height: 100%;
}
.links-list a { display: block; padding: 0.3em 0.3em 0.3em 4px; height: 100%;}
.links-list img { float:  right; }
.links-list h2 { font-size: 1.1em; font-weight: bold;}

.ul-column { width: 200px; float: left; font-size: 1,1; }
.ul-column li { }
.list-regions { padding:0; margin: 0; border: 1px solid #000; position: absolute; top: 20px; left: 30px; z-index: 100; background: #333 ; -moz-border-radius: 4px; -webkit-border-radius: 4px}
.list-regions a {}
.list-regions div { background: #FFF url(../images/puce-list-regions.gif) no-repeat 3px center; padding-left: 12px;  }
.ul-column a.btn-show, .ul-column a.btn-hide { font-size: 10px; display:inline; background-image: url(../images/show-hide.png); background-repeat: no-repeat; padding-left: 10px }
.ul-column a.btn-show { background-position: 0 6px;}
.ul-column a.btn-hide { background-position: 0 -14px;}
.ul-column a.btn-show:hover,.ul-column a.btn-hide:hover { background-color: none; color: #D5D5D5; }

<ul class="links-list ul-column">
    <li>
        <div> <a href="#">

AFRIQUE DU SUD </a>
</div>
</li>
<li>
    <div> <a href="#"> ALLEMAGNE </a> </div>
</li>
<li>
    <div> <a href="#"> ARGENTINE </a> </div>
</li>
<li>
    <div> <a href="#"> AUSTRALIE </a> </div>
    <div style="position: relative;">
    	<a id="states_AU_link" href="#" class="btn-hide">Voir les provinces</a>
        <div id="states_AU" class="list-regions" style="display: block;">
            <div><a href="#">Australian Capital Territory</a></div>
            <div><a href="#">Jervis Bay Territory</a></div>
            <div><a href="#">New South Wales</a></div>
            <div><a href="#">Northern Territory</a></div>
            <div><a href="#">Queensland</a></div>
            <div><a href="#">South Australia</a></div>
            <div><a href="#">Tasmania</a></div>
            <div><a href="#">Victoria</a></div>
            <div><a href="#">Western Australia</a></div>
        </div>
    </div>
</li>
<li>
    <div> <a href="#"> AUTRICHE </a> </div>
</li>
<li>
    <div> <a href="#"> BELGIQUE </a> </div>
</li>
<li>
    <div> <a href="#"> BRÉSIL </a> </div>
</li>
<li>
    <div> <a href="#"> CANADA </a> </div>
    <div style="position: relative;"> <a id="states_CA_link" href="#" class="btn-hide">Voir les provinces</a>
        <div id="states_CA" class="list-regions" style="display: none;">
            <div><a href="#">Alberta</a></div>
            <div><a href="#">British Columbia</a></div>
            <div><a href="#">Manitoba</a></div>
            <div><a href="#">New Brunswick</a></div>
            <div><a href="#">Newfoundland and Labrador</a></div>
            <div><a href="#">Nova Scotia</a></div>
            <div><a href="#">Ontario</a></div>
            <div><a href="#">Prince Edward Island</a></div>
            <div><a href="#">Quebec</a></div>
            <div><a href="#">Saskatchewan</a></div>
        </div>
    </div>
</li>
<li>
    <div> <a href="#"> CORÉE, RÉPUBLIQUE DE </a> </div>
</li>
<li>
    <div> <a href="#"> DANEMARK </a> </div>
</li>
<li>
    <div> <a href="#"> ESPAGNE </a> </div>
</li>
</ul>

Qu'en pensez-vous

Je pense que tu pars sur de mauvaises bases. L'utilisation de divs ici n'est pas nécéssaire. En faisant :

<ul class="menu">

	<li class="titre">TITRE1</li>

	<li class="titre">TITRE2

	<ul class="sousmenu">

		<li>Sous-titre2.1</li>

		<li>Sous-titre2.2</li>

	</ul>

	</li>

	<li class="titre">TITRE3</li>

	<li class="titre">TITRE4

	<ul class="sousmenu">

		<li>Sous-titre4.1</li>

		<li>Sous-titre4.2</li>

	</ul>

	</li>

</ul>

Tu auras bien plus de contrôle ainsi qu'un code plus propre

Merci Cursus,

C'est ce que j'avais fait au début. J'y suis revenu. Mais IE me fait toujours des caprices. Cette fois, mon sous-menu passe en dessous des liens de premier niveau de mon menu général. I don't understand