28127 sujets

CSS et mise en forme, CSS3

Bonjour à toutes et tous,
Je suis novice et je viens vers vous parce que je me casse la tête sur un menu de navigation.
Les premiers sont gentillement alignées horizontalement l'un à côté de l'autre, impecc.
Le dernier niveau de navigation pour chaque onglet doit être aligné verticalement.
Et là je m'emmêle les pinceaux. Dois-je utiliser clear? À force de chercher, je ne sais plus du tout quelle propriété display, je dois utiliser. Quelqu'un peut-il m'aider?

Voici le code de ce menu que j'intègre dans mes pages grâce à un "include "en php.

Partie HTML

<nav class="navbar" id="topmenu">
    <ul><!--menu principal-->
      <li><a href="index.php">Accueil</a></li><p class="slash"> / </p><!--niveau 1/Acceuil-->
      
      <li><a href="actualites.php">Actualité</a></li><p class="slash"> / </p><!--niveau 1/Actualités--->
      
      <li><a href="#">Atelier</a><!--niveau 1/Atelier-->
       		<ul><!--niveau 2/Atelier-->
            	<li><a href="atelier.php" id="">L'atelier</a></li>
                <p class="slash"> / </p>
                <li><a href="pourquoi.php" id="">Cairn ?</a></li>
                <p class="slash"> / </p>
                <li><a href="equipe.php" id="">L'équipe</a></li>
                <p class="slash"> / </p>
                <li><a href="profils.php" id="">Profils</a></li>
                <p class="slash"> / </p>
                <li><a href="contact.php" id="">Contact</a></li>
                <p class="slash"> / </p>
                <li><a href="publications.php" id="">Publications</a></li>
            </ul><!--/atelier-->
      </li>
	  <p class="slash"> / </p>
      <li><a href="projets.php">Projets</a><!--Projets/niveau 1-->
      		<ul><!--Projets/niveau 2-->
          		<li><a href="culte.php" id="">Cultes</a>
          			<ul><!--niveau 3/liste cultes / à mettre en liste verticale-->
						<li><a href="#" class="nivo">Cathédrale St Cyr et Ste Juliette / Nevers</a></li>
						<li><a href="#" class="nivo">Chapelle ND Libératrice / Salins-les-Bains</a></li>
						<li><a href="#" class="nivo">Cathédrale St Pierre / Saint-Claude</a></li>
						<li><a href="#" class="nivo">&Eacute;glise coparoissiale / Saint -Hymethière</a></li>
						<li><a href="#" class="nivo">&Eacute;glise St-Valère / Goux-les-Usiers</a></li>
						<li><a href="#" class="nivo">&Eacute;glise Ste-Bernadette du Banlay / Nevers</a></li>	
					</ul><!--/liste culte-->
          		</li>
                <p class="slash"> / </p>
          		<li><a href="culturel.php" id="">Culturel</a><!--Projets/niveau 2-->
          			<ul><!--Projets/niveau 3-->
              			<li><a href="archeo.php" id="">Archéologie</a>
                        	<ul><!--niveau 4/liste archéologie/ à mettre en liste verticale-->
								<li><a href="#" class="nivo">Site archéologique de Bibcrate / Mont-Beuvray</a></li>
								<li><a href="#" class="nivo">Ancien palais abbatial / Saint-Claude</a></li>
								<li><a href="#" class="nivo">La Porte Noire / Besançon</a></li>
								<li><a href="#" class="nivo">Ancien prieuré / La Charité-sur-Loire</a></li>	
							</ul><!--/liste archeo-->
                        </li><!--/archéologie-->
                    	<p class="slash"> / </p>
              			<li><a href="sceno.php" id="">Scénographies</a>
                        	<ul><!--niveau 4/liste sceno/à mettre en liste verticale-->
      							<li><a href="#" class="nivo">Musée National du Moyen-&Acirc;ge / Paris </a></li>
                                <li><a href="#" class="nivo">Musée National du Moyen-&Acirc;ge </a></li>
                                <li><a href="#" class="nivo">Château de Maulnes / Cruzy-le-Chatel</a></li>
                                <li><a href="#" class="nivo">Musée municipal / Montauban</a></li>
                                <li><a href="#" class="nivo">Musée national / Meudon</a></li>
                                <li><a href="#" class="nivo">Musée départemental / Chambéry</a></li>
          					</ul><!--/liste sceno-->
                        </li><!--/scénographie-->
                    	<p class="slash"> / </p>
              			<li><a href="theatre.php" id="">Théâtres</a>
                        	<ul><!--niveau 4/liste théâtre/à mettre en liste verticale-->
      							<li><a href="#" class="nivo">Ancien prieuré / La Charité-sur-Loire</a></li>
                                <li><a href="#" class="nivo">Théâtre municipal / Gray</a></li>
                                <li><a href="#" class="nivo">Forge royale de la Chaussade / Guérigny</a></li>
                                <li><a href="#" class="nivo">Théâtre municipal / Le Puy-en-Velay</a></li>
          					</ul><!--/liste théâtre-->
                        </li><!--/théâtres-->
                    	<p class="slash"> / </p>
              			<li><a href="fortif.php" id="">Fortifications</a>
                    		<ul><!--niveau 4/liste fortif/à mettre en liste verticale-->
      							<li><a href="#" class="nivo">Fort de Joux, fortifications / La Cluse-et-Mijoux</a></li>
                                <li><a href="#" class="nivo">Fort de Joux, fortifications 2 / La Cluse-et-Mijoux</a></li>
                                <li><a href="#" class="nivo">Fort de Joux, musée / La Cluse-et-Mijoux</a></li>
                                <li><a href="#" class="nivo">Citadelle / Besançon</a></li>
                                <li><a href="#" class="nivo">Quai de la gare d'eau / Besançon</a></li>  
          					</ul><!--/liste fortif-->
                    	</li><!--/fortifications-->
            		</ul><!-- / niveau 3/Projets-->  
           		</li>
           		<p class="slash"> / </p>
          		<li><a href="contemporain.php" id="">Contemporain</a>
                </li><!--niveau 2-->
          		<p class="slash"> / </p>
          		<li><a href="institutionnel.php" id="">Institutionnels</a>
                </li><!--niveau 2-->
         		 <p class="slash"> / </p>
          		<li><a href="habitat.php" id="">Demeures</a>
                </li><!--niveau 2-->
          		<p class="slash"> / </p>
          		<li><a href="public.php" id="">Extérieurs</a>
                	<ul><!--niveau 3/liste public/à mettre en liste verticale-->
						<li><a href="#" class="nivo">Pont sur la Loire / La-Charité-sur-Loire</a></li>
						<li><a href="#" class="nivo">Site classé de Brancion / Martailly-les-Brancion</a></li>
						<li><a href="#" class="nivo">Site classé des cascades du Ray-Pic / Péreyres</a></li>
						<li><a href="#" class="nivo">Ancien prieuré / La Charité-sur-Loire</a></li>
						<li><a href="#" class="nivo">Pont de Noirfonds / Saint-Pierre d'Entremont</a></li>
					</ul><!--/liste public-->
                </li><!--niveau 2-->
        	</ul><!-- / niveau 2/Projets-->   
       </li><!-- / niveau 1/Projets-->
       <p class="slash"> / </p>
       
       <li><a href="faire.php">Savoir-faire</a></li><!--niveau 1-->
       <p class="slash"> / </p>
       
       <li><a href="abcdaire.php">Abécédaire</a></li><!--niveau 1-->
       <p class="slash"> / </p>
       
       <li><a href="extranet.php">Extranet</a></li><!--niveau 1-->   
    </ul><!--/menu principal-->
  </nav>


Parie CSS

.navbar ul {
  position:relative;
  float:right;
  width:73%; 
  list-style:none outside none;
  display:table;
  font-family:verdana;
  font-size:1.0em;
}
.navbar ul > li {
  display:table-cell;
}
.navbar ul:before, .navbar ul:after {
  display:table; content:''; clear:both;
  /* permet de remettre les li float:left dans le flux */
}
.navbar > ul li ul {
  display:none; /* sous-menu masqués */
  position:absolute;
  top:100%;
  left:0;
}
.navbar li:hover > ul {
  display:block; /* sous-menu affiché */
  display:table;
}
.navbar ul li a {
  display:block;
  padding:10px 15px;
  color:#C29165;
  text-decoration:none;
}
.navbar ul li:hover > a {
  
  color:#0E0E18;
  
  
}
.navbar ul li a {
  /*border-right:1px solid #C29165;*/
}
.navbar > ul > li:hover:after,
.navbar > ul > li > ul > li:hover:after {
  position:absolute;
  display:block; content:''; 
  
}

.nivo{clear:both;
}



D'avance, je vous remercie de votre réponse qui, j'en suis certaine va me permettre de progresser! Yesssss! Smiley biggrin
Bonjour et bienvenue sur le forum,

Je pense avoir compris le soucis, je vois bien un truc dans le genre
J'ai guère pu faire autrement pour le width en dur du dernier <li> par contre, si d'autres personnes ont une idée ...!?

NB: je ne sais pas sur quoi porte le site, mais y'a un paquet de lieu vers chez moi Smiley cligne
Merci beaucoup SolidSnake pour ton aide Smiley ravi . Je teste cela ce we et te dirai si ce que ça donne sur le site! Affaire à suivre, à +