Balise <a> ne fonctionne plus avec padding-left

Bonjour!

J'ai créé un top-panel jquery en me basant sur le démo de ce site : http://www.thatagency.com/design-studio-blog/2009/02/up-and-down-slider-using-jquery/

Seulement dans mon menu du haut, il me faut deux liens, l'un qui ouvre le dit menu et l'autre qui ne fait que nous ramener à l'accueil.

Mon code HTML :

<div id="top-panel">
    	<div id="titre_panel">Choisir un principe :</div>
        <ul id="panel_premier">
            <li><a href="#">Santé et qualité de vie</a></li>
            <li><a href="#">Équité et solidarité sociale</a></li>
            <li><a href="#">Protection de l'environnement</a></li>
            <li><a href="#">Efficacité économique</a></li>
        </ul>
        <ul id="panel_dernier">
            <li><a href="#">Participation et engagement</a></li>
            <li><a href="#">Accès au savoir</a></li>
            <li><a href="#">Subsidiarité</a></li>
            <li><a href="#">Partenariat et coopération intergouvernemental</a></li>
        </ul>
        <div class="clearboth"></div>
	</div>
    <div id="sub-panel">
        <div id="sub-panel-content">
            <a href="#" id="toggle">Choisir un principe</a>
            <a href="#">Accueil</a>
        </div>
    </div>

Et mon CSS à ceci :

#top-panel{background:#eef7cd; border-bottom:3px solid #a6c34e; padding:20px; font-size:0.8em;}
div#titre_panel{font-weight:bold; font-size:2em; padding-bottom:1em; color:#a8c14d;}
#top-panel ul{list-style-type:none; padding:0 1.5em; float:left; border-right:1px solid #aaa;}
#top-panel li{margin-bottom:0.6em;}
#top-panel li a{text-decoration:none;}
#top-panel li a:hover{text-decoration:underline;}
ul#panel_premier{padding-left:0;}
ul#panel_dernier{border-right:0;}

div#sub-panel{background-color:#666;}
/*div#sub-panel-content{padding-left:65%;}*/
div#sub-panel a{color:#fff; margin-right:30px; font-weight:bold; font-size:0.8em; outline:none;}

Mes liens fonctionnent à merveille si le "div#sub-panel-content" est en commentaire, mais ils deviennent "non-sensible" si j'essaie de mettre le dit padding.

J'espère avoir mis assez de détails pour que mon problème soit facile à comprendre (et à résoudre dans le meilleur des mondes)!

Un gros merci.
Modifié par jacques.genevieve (26 Aug 2011 - 21:54)

Bonjour,

je viens de tester le bout de code que tu as donné, même avec le padding-left tes liens sont toujours cliquables chez moi.
Tu aurais une page en ligne ? Vu que ton menu est basé sur un toogle en jquery si j'ai bien compris, c'est peut-être pas un souci de css.

Bonjour!

Merci juste ça (ton test) m'a aidé beaucoup. J'aurais dû mettre plus de code CSS en commentaire et ainsi me rendre compte que mon h1 embarquait partiellement sur mon menu, le rendant ainsi inactif.

C'est maintenant fonctionnel! Yay comment bien commencer une semaine.