Css menu spécifique non inteféférant

Bonjour à tous,

Je me permet de vous solliciter car j'ai un peu de mal à assimiler tous ce qui est class, pseudo class..
Malgré le billet qui se trouve à l'entrée de cette catégorie forum.

Bon voici ce qui m'améne:

Je suis en train de créer un site avec sa page, son menu, son forum "en cours d'intégration".

Mon menu commence à ressembler à ce que je veux mais si ce menu se trouve sur la même page que mon forum, ce qui sera nécessaire, mon menu et celui du forum rentre en conflit et mes 2 menus sont détruit.

J'ai donc essayer de mettre des class, mais comme j'ai énormément de mal à assimilé cette notion je foire mon coup.

Vous pourriez me donner un petit coup de main?


le site

le code php du menu

<link rel="stylesheet" href="http://grafikar.fsfrancesimulateur2.fr/site2/menu/menu.css" type="text/css" media="screen"/>

<div id="conteneur-menu">
<div id="titre-menu">
	Fs France Simultateur2
</div>
<div id="menu-site">

 
		<dl>
			<dt>Accueil</dt>
			<dd>
				<ul>
					<li><a href="./index.php">Accueil</a></li>
					<li><a href="./contacteznous.php">Laisser un message</a></li>
				</ul>

			</dd>
		</dl>
		
</div>
</div>
<div class="clear">	</div>

et le code css du menu

.body {
background:none;
}
 
#conteneur-menu{
  height: 40px;
  position: relative;

}
 
#titre-menu{

  position: relative;
    color:#000000;
top:30px;
left:30px;
  text-shadow: 2px 2px 0px #818181;
  cursor: pointer;
    font-size: 35px;
  font-weight: bolder;

}


#menu-site {
position: absolute;
width: auto;
background-image:url(plaque2.jpg) ;
top:80px;
right:20px;
padding-right: 20px;
}
 

#menu-site dl{
  width: 155px;
  height:38px;
  margin: 0; padding: 0;
  display: block;
  float: left;
  color:#000000;
  font-weight: bolder;
  text-shadow: 2px 2px 0px #ffffff;
}
 
#menu-site dt{
  width: 155px;
  height:38px;
  display: block;
  float: left;
  line-height: 37px;
  font-size: 18px;
  font-weight: bolder;
  text-align: center;
  color:#000000;
  font-weight: bolder;
  text-shadow: 2px 2px 0px #ffffff;
  cursor: pointer;
}


#menu-site dd{
  width: 155px;
  height:38px;
  display: block;
  margin: 0; padding: 0;
  float: left;
  line-height: 37px;
  text-align: center;
  cursor: pointer;
}

#menu-site dd ul li{
  margin: 0; padding: 0;
  text-align: center;
  list-style: none;
  background-image:url(plaque2.jpg) ;
  font-weight: bolder;
    color:#000000;
  text-shadow: 2px 2px 0px #ffffff;
}
 
#menu-site dd ul li{
  display: block;
  margin: 0; padding: 0;
    color:#000000;
  text-shadow: 2px 2px 0px #ffffff;
}

#menu-site dd ul li a{
  margin: 0; padding: 0;
  font-weight: bolder;
  color:#000000;
  text-shadow: 2px 2px 0px #ffffff;
  display: block;
  text-decoration: none;
  width: 155px;
  height: 38px;
  line-height: 38px;
}

#menu-site dd ul li a:hover {
  background-image:url(plaque3.jpg) ;
  margin: 0; padding: 0;
  color:#000000;
  text-shadow: 2px 2px 0px #ffffff;
  display: block;
  text-decoration: none;
  font-weight: bolder;
  width: 155px;
  height: 38px;
  line-height: 38px;
}
 

 
#menu-site dl dd{
  display: none;}
 
 
#menu-site dl:hover dd{
  display: block;
}
#menu-site clear
{ 
clear: both;
}

et petite question pourquoi ce symbole #

merci d'avance flo
Modifié par flo3376 (26 Jan 2013 - 11:51)

flo3376 a écrit :
et petite question pourquoi ce symbole #

Ça signifie que tu fais référence à un id présent sur la page.