Problème de css pour 2 menus dans le même page

Bonjour,
je rencontre un probleme de css pour les 2 menus qui se trouvent dans la même page (horizontal et vertical).
j'ai l'impression que le second menu hérite des propriétés du premier ! !!
et quand je précise l'ID des div (#menu et #menu_left), je perds toute la mise en forme de mes css.

pouvez-vous m'aider car je ne comprend plus rien !
http://bois-et-caux.com/index.php/competences.html

html :

<div id="header">
<div class="mod_navigation block" id="menu">
<ul class="level_1"> 
<li>....</li>
<li>...</li>
</ul>
</div>
</div>

<div id="left">
<div class="mod_navigation block" id="menu_left">
<ul class="level_1"> 
<li>....</li>
<li>...</li>
</ul>
</div>
</div>

css du menu dans le header :

#header.mod_navigation{
   position:absolute;
    top:95px;
    left: 0px;
   width:940px;
    border: 0px solid #000;
    z-index: 9900;
   padding:0;
   text-align: center; 
}
#header.mod_navigation li
{
   z-index: 9900;
   display: block;
   float: left;
   width: 155px;
   margin: 0;
   padding: 0;
   border: 0;
}
#header.mod_navigation li a:link, #header.mod_navigation li a:visited
{
   display: block;
   font-size:13px;
   color: #000;
   margin: 0;
   height:23px;
   padding: 4px 8px;
   border-right: 0px solid #fff;
   text-decoration: none;
}
#header.mod_navigation  li a:hover { 
   background: transparent url(../images/menu.jpg) repeat-x;
   font-weight:bold;
   font-size:12px;
}

#header.mod_navigation li .active 
{
   display: block;
   height:23px;
   color: #000;
   background: transparent url(../images/menu.jpg) repeat-x;
   margin: 0;
   padding: 4px 8px;
   font-weight:bold;
   border-right: 0px solid #fff;
   text-decoration: none;
}

css du menu colonne left:

div #menu_left{
   list-style: none;
}
div #left.mod_navigation  #menu_left li a {
     height: 32px;
     voice-family: "\"}\""; 
     voice-family: inherit;
     height: 24px;
   text-decoration: none;
   }   
   
div #left .mod_navigation  #menu_left li a:link, div #left .mod_navigation #menu_left li a:visited {
   color: #888;
   display: block;
   padding: 8px 0 0 30px;
   }
   
div #left .mod_navigation #menu_left  li a:hover, div #left .mod_navigation #menu_left  li a:active {
   color: #283A50;
   padding: 8px 0 0 30px;
   }

merci
Modifié par thomasv (16 Jul 2010 - 11:35)

Bonjour,

J'ai comme l'impression que ton css du deuxième menu est faux

#left .mod_navigation 

pourra marcher avec ça :

<div id="left"><div class="mod_navigation">
</div>
</div>

par contre :

#left.mod_navigation 

fonctionnera avec ça :

<div id="left" class="mod_navigation">

</div>

tu voit la différence ?

Vrai aussi pour les div #left qui est différent de div#left ...

a toi de jouer