Une barre de naviguation horizontale / liens vertcicaux

Bonjour,

J'aurais besoin d'aide pour la feuille .css !

J'ai donc entrepris, pour mon blog, de faire une barre de navigation horizontale avec une déroulé vertical et j'ai déjà un gros soucis entre FF (où je fais mes développements) et IE (que beaucoup de monde utilise encore !). Pour ce dernier, les déroulés ne s'activent pas comme je l'espérais ... y'en a simplement pas !

Voici mon code:

<div id="top">
    <h1><a href="<?php dcInfo('url'); ?>"><?php dcInfo(); ?></a></h1> 
<!-- barre de navigation horizontale -->
<ul id="menuDeroulant">
 <li><a href="<?php dcInfo('url'); ?>">Accueil</a></li>

 <li>
    <a href="<?php dcInfo('url'); ?>">Catégories</a>
    <ul class="sousMenu">
           <li><?php dcCatList(); ?></li>
    </ul>
 </li>

 <li>
    <a href="<?php dcInfo('url'); ?>">Liens</a>
    <ul class="sousMenu">
        <li><?php dcBlogroll::linkList();?></li>        
    </ul>
 </li>

 <li>
    <a href="<?php dcInfo('url'); ?>">Archives</a>
    <ul class="sousMenu">
           <li><?php dcMonthsList(); ?></li>
    </ul>
 </li>
</ul>
    
</div>

Voici la feuille .css:

/* Barre de naviguation */
#menuDeroulant {
 list-style-type: none;
 margin: 0;
 padding: 0;
 border: 0;
/* position: absolute; Je ne trouve pas cela beau */
 top: 0;
 left: 0;
 font-weight : bold;
 text-align: center;
}

#menuDeroulant li {
 float: left;
 width: 150px;
 margin: 0;
 padding: 0;
 border: 0;
 /*width: 630px;*/
}

#menuDeroulant .sousMenu {
 display: none;
 list-style-type: none;
 margin: 0;
 padding: 0;
 border: 0;
 background-color: #eb8500;
 font-size : 0.9em;
 text-align: left;
}

#menuDeroulant .sousMenu li {
 float: none;
 margin: 0;
 padding: 0;
 border: 0;
 width: 149px;
 border-top: 1px solid transparent;
 border-right: 1px solid transparent;
}

#menuDeroulant li a:link, #menuDeroulant li a:visited {
 display: block;
 height: 1%;
 color: #FFF;
 background: #eb8500; /*#3B4E77;*/
 margin: 0;
 padding: 4px 8px;
 border-right: 1px solid #fff;
 text-decoration: none;
}
#menuDeroulant li:hover > .sousMenu { display: block; }

#menuDeroulant li a:hover { background-color: #9f653f; /*#F2462E;*/ }
#menuDeroulant li a:active { background-color: #742f08;/*#5F879D;*/ }

#menuDeroulant .sousMenu li a:link,
#menuDeroulant .sousMenu li a:visited {
 display: block;
 color: #FFF;
 margin: 0;
 border: 0;
 text-decoration: none;
 background: transparent url("fondTR.png") repeat;
}

#menuDeroulant .sousMenu li a:hover {
 background-image: none;
 background-color: #9f653f; /*#F2462E;*/
}

.sousMenu ul, sousMenu ul ul { 
   margin : 0 0 1.5em 0;
   padding : 5px 1em 5px 0;
   list-style-type : none;
   background-color: #eb8500; /*#cc0;*/
   color: #4b4b69;
   font-weight : bold;
   font-size : 0.9em;
   text-align: left;
}

A cela, je voudrais modifier 2 ou 3 bricoles du genre:
- Le déroulé passe audessus de tout (Blog du Renard)
- La barre de naviguation aille jusque la ligne orange
- Voir s'il n'y pas moyen de faire plus light dans la .css

Merci beaucoup
Modifié par sebe (22 Apr 2007 - 20:56)