Les mots qui sortent du bloc.

Signaler
-
Bonjour,

J'ai eu un problème lorsque je commençais à faire ma page html css, lorsque j'ai crée une barre de menu avec un background gris et que je reduis la taille de celui sur le navigateur des bouts de mots sortent du background

J'ai essayé de chercher sur internet mais rien, qui est en rapport avec mon problème.

Si vous pouviez l'expliquer où se situe le problème?

Voici le code CSS :
/*Mot sur image*/
.motSurImage p{
	position: absolute;
	top : 15px;
	left: 30px;
	font-size:30px;	
}
.motSurImage p a{
	text-decoration:none;
	color: white;
}

/*menu*/
div#menu {
	background-color:grey;
	width:100%;
	height:50px;
}
div#menu ul{
	margin:0;
	position:relative;
	width:100%;
}

div#menu ul li{
	position:relative;
	float:left;
	list-style:none;
	padding-top:10px;
	width:150px;
	text-align:center;
	left:10px;
}
div#menu ul li a{
	text-decoration:none;
	padding:10px;
}
div#menu ul ul{
	display:none;
}


Et HTML :
<html>
<head>
<meta charset="utf-8">
<title>Accueil</title>
<link rel="stylesheet" type="text/css" href="style/style3.css" />
<link rel="stylesheet" type="text/css" href="style/normalize.css" />

</head>

<body>
<div class="motSurImage">
<img id="1" src="image/1.jpg" width="100%" height="100px">
<p><a href=""> Écosia</a></p>
</div>

<div id="menu">
<ul>
<li id="index"><a href="index.html">Accueil</a></li>

<li id="new"><a href="news.html">Actualité</a></li>
<ul id="subnew">
<li href="">Association </li>
<li href="">Activité</li>
</ul>

<li id="info"><a href="info.html">Information</a></li>
<ul id="subinfo">
<li href="">Association</li>
<li href="">Activité</li>
</ul>

<li id="orga"><a href="orga.html">Organisation</a></li>
<li id="time"><a href="time.html">Calendrier</a></li>
<li id="other"><a href="other.html">Autre </a></li>
<li id="contact"><a href="contact.html">Contact</a></li>
</ul>
</div>
</body>
</html>


Merci.