Estoy realizando un menú horizontal para mi página, pero al reducir el tamaño de la pantalla para hacer que la página sea responsive, per el menú no se hace más pequeño, sino que se amontonan unos con otros. He probado algunas cosas pero ninguna ha dado resultado.
He buscado información en varios sitios pero sigo sin comprender que he hecho mal, os adjunto el código original. Cualquier ayuda es bienvenida.
He añadido lo que he realizado en otros intentos y no funcionaba
<html>
<style>
.menuhorizontal{
width: 100%;
margin: 0px auto;
background-color: ;
text-align: center;
}
.menuhorizontal ul {
list-style-type: none;
display: inline-block;
}
.menuhorizontal ul li {
float: left;
margin-top: 10px;
font-size: 1.5em;
padding: 2px;
margin: 3px;
border: 1px solid black;
}
.menuhorizontal li {
font-size: 1.5em;
padding: 2px;
margin: 3px;
border: 2px solid black;
border-radius: 10px;
background-color: white;
}
a {
padding: 5px;
font-family: "Times New Roman", Times;
text-decoration: none;
color: black;
}
a:hover {
color: blue;
}
li:hover {
background-color: none;
}
.active {
font-weight: bold;
color: Black;
}
@media screen and (max-width: 100px) {
.menuhorizontal {
width: 25%;
}
}
</style>
<body>
<div class="menuhorizontal">
<ul>
<li>
<a href="index.html" class="active">Inicio</a>
</li>
<li>
<a href="1.html">Quienes Somos</a>
</li>
<li>
<a href="2.html">Nuestras Actvidades</a>
</li>
<li>
<a href="">Contacto</a>
</li>
</ul>
</div>
</body>
</html>