0

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.

introducir la descripción de la imagen aquí

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.

introducir la descripción de la imagen aquí 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.

2 respuestas 2

1

Aplicando los siguientes estilos debería conseguir el efecto que quieres

.nav{ 
    display: flex; 
    width: 100%;
    justify-content: space-between;
}

.nav li {
    width: 100%;
}
1
  • gracias me sirvio de mucho :)
    – Darklawz
    Commented el 22 abr. 2019 a las 18:05
0

Espero que aún te sirva mi pequeño aporte :D

Tratando de arreglar un poco tu código el resultado quedaría algo así:

introducir la descripción de la imagen aquí


Tu código queda así:

  * {
    	padding: 0;
       margin: 0;
       font-family: sans-serif;
       transition: all 300ms;
    }

    ul.nav {
    	list-style-type: none;
    	background: #1b4f72;
      position: relative;
      /*De Jeremy Fonseca*/
      width: 100%;
      display: flex;
      height: 60px;
      /* Espacio entre cada elemento */
      justify-content: space-around;
      /*Todo centrado*/
      /* justify-content: center; */
      /*Espacio entre cada elemento menos entre los extremos*/
      /*justify-content: space-between;*/
    }

    ul li {
      width: auto;
      height: 100%;
    }

    ul li a {
    	color: lightgrey;
    	text-decoration: none;
    	padding: 15px;
      display: block;
      line-height: 30px;
   }

    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;
    		}
    }
  
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Menú</title>
</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</a> 	    
            <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>


By: Jeremy Fonseca

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.