28172 sujets

CSS et mise en forme, CSS3

Menu déroulant sans float

Bonjour,


J'ai actuellement un menu déroulant qui utilise float left pour placer correctement les catégories, mais je voudrais savoir s'il est possible de faire sans ce float, car il m'empeche de centrer correctement le menu en fonction de la résolution... il ne bouge pas bien avec le reste de la page...

Je sais pas si le mieux est de mettre autre chose à la place de float ou de faire quelque chose qui permet de centrer correctement le menu malgré le float.

Voilà le menu :

<section id="navigation">
			
			<nav role="navigation">
					
						<ul class="menu">
						
							<li><a href="index.php">Accueil</a></li>
							<li>
								<a href="lycee.php">Lycée</a>

								<ul class="menu_lycee">
									<li><a href="lycee.php">Présentation</a></li>
									<li><a href="historique.php">....</a></li>
									<li><a href="#">....</a></li>
									<li><a href="#">....</a></li>
									<li><a href="#">....</a></li>
									<li><a href="#">....</a></li>
									<li><a href="#">....</a></li>
									<li><a href="sport.php">....</a></li>
								</ul>
							</li>
							<li>
								<a href=".....php">....</a>
								
								<ul class="menu_formations">
									<li><a href="....">....</a></li>
									<li><a href="#">....</a></li>
									<li><a href="#">....</a></li>
								</ul>
							</li>
							<li>
								<a href="#">....</a>
								
								<ul>
									<li><a href="#">....</a></li>
									<li><a href="#">....</a></li>
									<li><a href="#">....</a></li>
									<li><a href="#">....</a></li>
									<li><a href="#">....</a></li>
									<li><a href="#">....</a></li>
								</ul>
							</li>
							<li>
								<a href="#">....</a>
								
								<ul>
									<li><a href="#">....</a></li>
									<li><a href="#">....</a></li>
									<li><a href="#">....</a></li>
									<li><a href="#">....</a></li>
									<li><a href="#">....</a></li>
									<li><a href="#">....</a></li>
									<li><a href="#">....</a></li>
								</ul>
							</li>
							<li>
								<a href="#">....</a>
								
								<ul>
									<li><a href="#">....</a></li>
									<li><a href="#">....</a></li>
								</ul>
							</li>
							<li><a href="#">....</a></li>
							
						</ul>
					
			</nav>
				
		</section>



Et le CSS :

#navigation
{
	text-align: center;
	color: white;
	margin-top: -5px;
}

#navigation ul
{
	padding-left: 20%;
	line-height : 21px;
}

#navigation ul ul
{
	padding-left: 15px;
}

#navigation ul li
{
	display: inline;
	margin: 0;
}


/* Menu déroulant */

.menu li
{
	float: left;
	padding-right: 20px;
	
	/* avec ceci ?
	position: relative;
	display: inline-block;
	padding-right: 20px;
	pas de float
	*/
}

.menu li li
{
	width: 100%;
	height: 30px;
	padding: 0;
	padding-top: 3px;
	margin: 0;
	text-align: left;
}

.menu li ul
{
	position: absolute;
	display: none;
	width: 150px;
	background-color: rgb(51,51,51);
	padding: 15px;
	border-bottom: 7px rgb(0,141,183) solid;
}


.menu li:hover ul ul, .menu li.sfhover ul ul
{
    display: none;
}

.menu li:hover ul, .menu li li:hover ul, .menu li.sfhover ul, .menu li li.sfhover ul 
{
	display: block;
	min-height: 0;
}

Modifié par Crousti2 (01 Sep 2012 - 10:41)
Sujet clos
Aller à