28111 sujets

CSS et mise en forme, CSS3

Améliorer l'affichage d'un menu

Bonjour,
J'ai récupérer un tutoriel que j'ai adapté à mon site en construction.
Le menu fonctionne correctement sur mon écran de 17'. Je voudrai l'adapter à un écran plus petit, (hors petites tablettes et smartphone que je traiterai par responsive).
Pour le moment si je réduis la taille de mon écran les onglets de droites passent sous ceux de gauche.
quelqu'un peut il m'aider ?
mon code css

/*  LE MENU    */
#menu { width:100%; height:2em; background-color:#000000; margin-right:auto; margin-left:auto; }
#menu a { width:11.2em;  height:2em; font-family:Arial; color:#FFFFFF; font-size:1em; text-align:center; float:left; line-height:2em; text-decoration:none;}
#menu a:hover { color:#FFFF00; background-color:#3C3C3C; }
#menu a:active { color:#d7d7d7; background-color:#f90d38; }
#menu li { position:relative; float:left; background-color:#000000; list-style-type:none; }
#menu ul { margin:0; padding:0; }
#menu ul ul { position:absolute; top:0; display:none; }
#menu ul.niveau1 li.sousmenu:hover ul.niveau2 { font-size:0.9em; display:block; }
#menu ul.niveau2 { left:0.7em; top:2.2em; }

le menu de la page index

	<div id="menu">
			<ul class="niveau1">
				<li><a href="index.php?page=accueil">Accueil</a></li>
				<li><a href="index.php?page=historique">Historique</a></li>
				<li><a href="index.php?page=charte">Charte</a></li>
				<li class="sousmenu"><a href="#">Les rencontres</a>
					<ul class="niveau2">
						<li class="sousmenu"><a href="index.php?page=2019">année 2019</a></li>
						<li><a href="index.php?page=2018">année 2018</a></li>
						<li><a href="index.php?page=2017">année 2017</a></li>
						<li><a href="index.php?page=2016">année 2016</a></li>
						<li><a href="index.php?page=annees_anterieures">années antérieures</a></li>
					</ul>
				</li>
				<li><a href="index.php?page=contact">Contacts</a></li>
				<li class="sousmenu"><a href="">Divers</a>
					<ul class="niveau2">
						<li class="sousmenu"><a href="index.php?page=carte-troissy">Situer Troissy</a></li>
						<li><a href="index.php?page=carte-partenheim">Situer Partenheim</a></li>
						<li><a href="index.php?page=comite">Comité du jumelage</a></li>
						<li><a href="index.php?page=vie_communale">Vie communale</a></li>
						<?php
						if (isset($_SESSION['type'])){ 
						if ($_SESSION['type'] == 'Administration'){
							 ?><li><a href="index.php?page=addmember">Ajouter un membre</a></li>
							   <li><a href="index.php?page=delmember">Retirer un membre</a></li>
							   <li><a href="index.php?page=comodmember">consulter le fichier</a></li>
							   <li><a href="index.php?page=changepasswforget">Mot de passe reçu</a></li>
 						<?php
						}
						}?>
					</ul>
				</li>
			</ul>
	</div>
Sujet clos
Aller à