Hola espero estén bien :)
tengo un menú desplegable que hice con html y css, pero quiero acomodar los menús de forma que se expandan por toda la pantalla del diseño.
por ejemplo,este es el menú despegable que tengo.
quiero que sea como la siguiente imagen
que se mire de esta forma que los menús
de la barra se expandan por el diseño azul de la pantalla.
a continuación les dejo el código CSS y html
body {
padding: 0;
margin: 0;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
background: #1b4f72;
position: relative;
}
ul li {
display: inline-block;
}
ul li a {
color: lightgrey;
text-decoration: none;
padding: 15px;
display: block;
}
ul li:hover {
background: #0a1445;
}
ul ul {
position: absolute;
min-width: 200px;
background: #0a1445;
display: none;
}
ul ul li {
display: block;
background: #0a1445;
}
ul li:hover ul {
display: block;
}
ul li i {
color: #0a1445;
float: right;
padding-left: 5px;
}
nav div {
background: lightgrey;
color: #0a1445;
font-size: 24px;
padding: 0.6em;
cursor: pointer;
display: none;
}
@media(max-width: 768px) {
nav div {
display: block;
}
ul {
display: none;
position: static;
background: #e3e3e3;
}
ul li {
display: block;
}
ul ul {
position: static;
background: #e3e3e3;
}
}
<html>
<head></head>
<body>
<nav>
<div>
<i class="material-icons">menu</i>
</div>
<ul class="nav">
<li><a href="MDIPRUEBA.HTML">Inicio</a></li>
<li><a href="#">Registro</a>
<ul>
<li><a href="#">Ingreso de Expediente</a></li>
<li><a href="#">Busqueda de Expediente</a></li>
</ul>
</li>
<li><a href="#">Tramitaciones </a></li>
<li><a href="#">Reportes</a>
<ul>
<li><a href="#">Reporte Mensual</a></li>
<li><a href="#">Reporte Trimestral</a></li>
<li><a href="#">Reporte Anual</a></li>
</ul>
</li>
<li><a href="#">Mantenimiento</a>
<ul>
<li><a href="#">Usuarios</a></li>
</ul>
</li>
<li><a href="alerta.php"> Alerta
<i class="material-icons">add_alert</i>
</li>
<li><a href="#">Cuenta</a>
<ul>
<li><a href="#">Configuracion General</a></li>
<li><a href="#">Cerrar Sesion</a></li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
gracias por sus respuestas.