Css décalage d'un sous menu horizontal [Fermé]

Signaler
Messages postés
2
Date d'inscription
jeudi 22 avril 2010
Statut
Membre
Dernière intervention
27 octobre 2014
-
Messages postés
2
Date d'inscription
jeudi 22 avril 2010
Statut
Membre
Dernière intervention
27 octobre 2014
-
Bonjour,
ça fait plus de 3 jours que je suis bloqué sur ce problème, c'est pour ça je suis venu voir si je peux trouver de l'aide ici.
je développe mon propre site où il y a un menu horizontal avec un sous menu qui est aussi horizontal qui prend la même largeur du menu parent, mon problème c'est que le sous menu se décale une fois je réduis la taille de la fenêtre

<div class="barmenug">
<div class="banner">
<div class="logo">
<a href=""><img src="./media/logo.png" /></a>
</div>
<div class="barmenu">
<ul id="menu">
<li><a href="./lien1/" >LIEN1</a></li>
<li><a  href="./lien2/">LIEN2</a>
<div class="ssm"><ul>
<li><a href='./S-LIEN1/' style="color:#fff;">S-LIEN1</a></li><!--
--><li><a href='./S-LIEN2/' style="color:#fff;">S-LIEN2</a></li><!--
--><li><a href='./S-LIEN3/' style="color:#fff;">S-LIEN3</a></li><!--
--><li><a href='./S-LIEN4/' style="color:#fff;">S-LIEN4</a></li><!--
--><li><a href='./S-LIEN5/' style="color:#fff;">S-LIEN5</a></li>
</ul></div>
</li>
<li><a href="./lien3/">LIEN3</a></li>
</ul></div>
</div></div>


et voici mon code css

.barmenug{
	position:fixed ;
	text-align:center;
	width:100%;
	height:50px;}
	
.banner{
	width:930px;
	background-color:#FFF;
	height:50px;
	border-bottom: 3px solid #ff0000;
	margin:auto;
	display:inline-block;
	
	}

.logo {
	
	height:40px;
	background-color::#FFF;
	padding-left:5px;
	padding-top:2px;
	float:left;
	text-align:left;
	}
	
.logo img{
	width:200px;}


.barmenu{
	text-align:right;
	margin-top:15px;
	height:30px;
	}

#menu ul {
    padding:0;
    margin:0;
    list-style: none;
	background-color:#ff0000;
	width:100%;
	
}
#menu li {
	display:inline-block;
    padding-left:10px;
    text-align: center;
    
}

#menu ul {
	position:absolute;
    left:-999em;
	text-align: right;
	
	
}


#menu li:hover ul {
	left:15.5%;
	background-color:#ff0000;
	width:931px;
	}
#menu a {
    outline: none;
}

#menu a:link{
	text-decoration:none;
	font-weight: bold;}


#menu ul li {
background-color:#ff0000;
height:40px;
padding-right:10px;
padding-top:10px;

}

.ssm{
background-color:#ff0000;
margin-top:9px;

}




#menu a {
	
	color:#404040;
	font-weight: 700;
	text-shadow: none;
	-webkit-transition: color 0.3s;
	-moz-transition: color 0.3s;
	transition: color 0.3s;
}

#menu a::before,
#menu a::after {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background: #000000 !important ;
	content: '';
	opacity: 0;
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	-moz-transition: opacity 0.3s, -moz-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
	-webkit-transform: translateY(-10px);
	-moz-transform: translateY(-10px);
	transform: translateY(-10px);
}

#menu a::before {
	top: 0;
	-webkit-transform: translateY(-10px);
	-moz-transform: translateY(-10px);
	transform: translateY(-10px);
}

#menu a::after {
	bottom: 0;
	-webkit-transform: translateY(10px);
	-moz-transform: translateY(10px);
	transform: translateY(10px);
}

#menu a:hover,
#menu a:focus {
	color: #000 !important;
}

#menu a:hover::before,
#menu a:focus::before,
#menu a:hover::after,
#menu a:focus::after {
	opacity: 1;
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	transform: translateY(0px);
}


#menu li a {
	position: relative;
	display: inline-block;
	
	outline: none;
	color: #ff0000;
	text-decoration: none;
	text-transform: uppercase;
	
	font-weight: 400;
	text-shadow: 0 0 1px rgba(255,255,255,0.3);
	font-size: 90%;
}

#menu li a:hover,
#menu li a:focus {
	outline: none;
}


merci d'avance pour vos réponses

1 réponse

Messages postés
2
Date d'inscription
jeudi 22 avril 2010
Statut
Membre
Dernière intervention
27 octobre 2014

en fait j'ai oublié de mettre un margin-left:auto; et margin-right:auto;
je m'excuse pour le d'arangement