Mise en forme

Bonjour,

Je suis en train de modifier un code pour l'adapter au design et au format de mon site. Le problème c'est que ce code est à un niveau de Css difficile (pour moi) et cela fait 2 jours que je change un truc là pour voir se qui ce passe, je change un machin là pour voir. Je teste sur Explorer, Mozilla et Opera... Evidemment je n'ai jamais la même chose, bien propre et bien calée. Alors que le menu de bas ne bouge pas sur ces navigateurs. Je mets des petites annotations lorsque je trouve à peu près à quoi sert telle fonction..etc.. Ayez pitié de moi

Est-ce que quelqu'un aurais juste un peu de temps pour me mettre quelques annotations en face des codes de façon à ce que je puisse avoir un menu potable ? D'avance merci beaucoup.

Voici mon code html :

  
	<ul id="nav">
	<li><a href="#">Lundi</a></li>
	<li><a href="#">Mardi</a>
		<ul>
			<li><a href="#" class="daddy">Midi</a></li>
			<li><a href="#" class="daddy">Minuit</a></li>
			
		</ul>
	</li>

	<li><a href="#">Mercredi</a></li>
	<li><a href="#">Jeudi</a></li>

	<li><a href="#">Vendredi</a>
		<ul>
			<li><a href="#" class="daddy">Midi</a></li>
			<li><a href="#" class="daddy">Minuit</a></li>
		</ul>
	</li>
<li><a href="#">Samedi</a></li>
</ul>

Et voici mon code CSS :

/* CSS Document */

#nav, #nav ul {
	float: left; /* boite flottante du sous menu */
	width: 770px;
	list-style: none;
	line-height: 1;
	background: #666666;
	font-weight: bold;
	padding: 0;
	border: solid #D2D852;/*Bordures du menu et du sous-menu */
	border-width: 0px 0;
	margin: 0 0 0em 0;
}

#nav a {
	display: block;
	width: 12em;
	w\idth: 6em;
	color: #ffffff; /* Couleur des titre du menu avec un lien*/
	text-decoration: none;
	padding: 0.15em 2em;
	font-family: Verdana;
	font-size: 11px;

}

#nav a.daddy {
	background: url(rightarrow2.gif) center right no-repeat;
}



#nav li {
	float: left;
	padding: 0;
	width: 6em; /* espace entre titre si=0, les uns sur les autres ???? */
}

#nav li ul {
	position: absolute;
	left: -999em;
	height: auto;
	width: 14.4em; /* largeur du hover du sous-menu */
	w\idth: 13.9em; /*largeur du sous-menu */
	font-weight: bold;
	border-width: 0.10em; /* Epaisseur bordure sous menu */
	margin: 0;
}

#nav li li {
	padding-right: 1em;
	width: 10em /* Marge de gauche du sous-menu ????*/
}

#nav li ul a {
	width: 13em;
	w\idth: 9em;
}

#nav li ul ul {
	margin: -1.75em 0 0 14em;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
	left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
	left: auto;
}

#nav li:hover, #nav li.sfhover {
	background: #D2D852; /* Back du rollover sur le menu */

}

#content {
	clear: left;
}

#content a {
	color: #7C6240;
}

#content a:hover {
	text-decoration: none;
}

#scaffolding {
	height: 70px;
	background: white url(/images/header_bg.gif) no-repeat;
	border: solid #eda;
	border-width: 1px 0 0 0;
	margin: 1em 0 0 0;
}

#scaffolding a {
	text-decoration: none;
	text-indent: -999em;
	display: block;
	height: 70px;
	background: url(/images/hdlogo_flip2.gif) no-repeat;
	background-position: 181px 0;
}

#scaffolding a:hover {
	background-position: 181px -70px;
}



		
	

Sachant que
- Sur Opera le rollover des titres est décalé sur les mots qui sont grands.
- Ce code html est dans un TD de 770px large et 15 px de haut
- Il y a un fichier Javascript pour faire tourner le rollover

- Je n'arrive pas à avoir un espacement entre les titres qui soit potable et un sous menu bien aligné à gauche et aligné sur la gauche du titre.

Pardon si je ne suis pas claire dans mes explications. Je répondrais à toutes les questions qui vous permettrons de résoudre ce souci. D'avance merci encore de m'aider.

Nathalie