Probléme de disign

Bonjour,
voilà j'arrive à la fin de mon stage et j'ai fini le site web que je devais créer.
Le souci c'est que je le test sur mon autre écran d'ordinateur quelques problèmes apparaissent....
J'ai voulu mettre dans mon menu du JS pour que quand la souris passe sur un de mes liens le fond de couleur et la couleur du liens changent...
Donc mon ecriture noire et mon fond rouge deviennent fond blanc et écriture rouge...
Nikel sur l'écran de mon ordinateur portable mais sur mon autre écran (un 20 pouces) quand je clic sur le premier et deuxième liens, tout le fond devient roouge!!!! pas seulement le fond du liens..
Je m'aperçois aussi que mon menu prend plus de largeur voire trop....
Si quelqu'un avait une idée?
Je sais que je devrais dans ce cas utiliser les pourcentages mais je n'y arrive pas...

<link href="../include/cote.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
</script>
<div class="tout">
<br/>
<p class="technic">TECHNIC SECURITE
<br/> <span class="elecgeneral"><span class="superieur">></span>ELECTRICITE GENERALE<span class="inferieur"><</span></span></p>

<h3 class="liens">
<dl id="menu">

<dt onclick="javascript:montre('sincendie');"></dt> </br>


<dd id="sincendie">
</br>
<ul>
<p><li>protection incendie:<li><a href="../incendie/detection.php">-détection </a></li>
<li><a href="../incendie/extinction.php">-extinction</a></li></p>

<p><li>nos partenaires:<li><a href="../partenaire/partenaire.php"></br>
- vidéo
- contrôle d'accès
- alarme intrusion</a></li></p>
<p><li><a href="../elec/elec.php">- électricité générale </a></li>
<li><a href="../auto/auto.php">- automatisme </a></li>
<li><a href="../ventilation/ventilation.php">- ventilation / aération </a></li>
<li><a href="../desenfumage/desenfumage.php">- désenfumage </a> </li>
<li><a href="../info/info.php">- câblage informatique </a></li></p>
<p><li><a class="sousliens" href="../depannage/depannage.php">- dépannage / maintenance </a></li></p>
<p><li><a href="../contacternous/contacternous.php">- contactez-nous </a></li>
<li><a href="../nosclients/nosclients.php">- nos clients </a></li></p>
</li>
</ul>
</dd>
</dl>


</h3>

<h4 class="bascote">
<a href="../contacternous/contacternous.php">- technicsecurite@free.fr </a><br/>
- Yves GRIFFON:<br/>
- Tel: 02.33.54.65.21<br/>
- Fax:02.33.54.60.37 <br/>
- Siret:453 345 506 00019<br/>
- 23, hameau les bertrands <br/>
- 50470 TOLLEVAST</h4>
<?php include("../include/nbvisiteurs.php");?>
</div>






.tout
{
background-color:white;
border:medium black solid;
margin-right:915px;
margin-left:10px;
}

.technic
{
font-weight:bold;
color:red;
font-size:25px;
text-align:center;
}

.nbvisiteurs
{
color:black;
text-align:center;
font-size:18px;
font-style:italic;
}


.liens
{
font-weight:bold;
background-color:red;
color:white;
text-decoration:none;
font-size:18px;
text-align:justify;
}

.sousliens
{
list-style-position: outside;
color: black;
}

.bascote
{
background-color:red;
color:white;
text-decoration:none;
font-size:18px;
}

a
{
color:white;
text-decoration:none;
}

.superieur,.inferieur
{
color:red;
font-weight:bold;
}

.elecgeneral
{
font-size:18px;
color:black;
}

dl, dt, dd, ul, li
{
list-style-type: none;
text-align:left;
}


#menu dt
{
font-weight: bold;
background: red;
cursor: pointer;
}

#menu dd
{
border: black;
background:red;
text-align:left;
list-style-position:outside;
}

#menu dl
{
font-size:25px;
color: white;
text-decoration: none;
height: 100%;
}

#menu li a:hover, #menu dt a:hover
{
background: white;
color:red;
}