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

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