0

espero esten bien :)

tengo el siguiente problema.

quiero mostrar un menu de navegacion cuando abro una pagina con contenido. El detalle esta cuando mando a llamar al menu de navegacion que tengo dentro de la misma pagina, no muestra los subs menu al momento de pasar el puntero del mouse.

les pondre imagenes para que me capten mejor

Este es el menu de navegacion, como ven tiene submenus cuando se pasa el cursor del mouse sobre cada menu.

introducir la descripción de la imagen aquí

Cuando mando a llamar el menu de navegacion a otro pagina con contenido, no me muestra los submenus

introducir la descripción de la imagen aquí

----dejo codigo para, saber donde tengo el problema ----

-----------------------------------------------------------------------------
este es el css del contenido de la pagina , tablas y las imagenes, esta en un archivo aparte llamado mycss.css
----------------------------------------------------------------------------------------------------------------------------------------------------------
.todo {
}
#cabecera {
	opacity: 1;
	text-align: center;

}
#contenido {
	min-height: 401px;

}
#footer {
}
#img1 {
       
	height: 150px;
	width: 100%;

}
#img2 {
	height: 150px;
	width: 100%;
}
body {
}
-----------------------------------------------------------------------------
este es el css del menu desplegable
tambien esta en un archivo aparte llamado MDIstyle.css ----------------------------------------------------------------------------------------------------------------------------------------------------------
* {
    margin:0px;
	padding:0px;
   }
			
	#header {
	margin:auto;
	width:100%;
	font-family:Arial, Helvetica, sans-serif;
            }
			
	ul, ol  {
	list-style:none;
		    }
			
	.nav {
	width:100%; /*Le establecemos un ancho*/
	margin:0 auto; /*Centramos automaticamente*/
	background:#0a1445;
    overflow: hidden;
	}

	.nav >li {
	float:left; 
	width:200px; 
	         }
			
	.nav li a {
	 background:#0a1445;
	 color:#fff;
	 text-decoration:none;
	 padding:30px 80px;
	 display:block;
			  }
			
	.nav li a:hover {
	 background-color:#434343;
			        }
			
	.nav li ul {
	 display:none;
	 position:absolute;
	 min-width:300px;
			   }
			
	.nav li:hover > ul {
	 display:block;
			           }
			
	.nav li ul li {
	 position:relative;
			      }

	.nav li ul li ul {
	 right:-99%;
	 top:0px;
			         }

	.clearfix {
	 overflow: auto;
			  }
-----------------------------------------------------------------------------
HTML de la pagina de contenido donde quiero mostrar el menu desplegable este es un archivo aparte
-----------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<title>Usuarios</title>
<style type="text/css">
@import url("css/mycss.css");
</style>
<link rel="stylesheet" type="text/css" href="librerias/alertifyjs/css/themes/default.css">
  <link rel="stylesheet" type="text/css" href="librerias/datatable/bootstrap.css">
</head>
<body>

------<!--Mostrar Menu Desplegable-->-------------------------------------
<?php
include "MDI_Admin.php";
?>
-------contenido de la pagina --------------------------------------------
<div class="todo">
  <div id="cabecera">
----------------------<!--Imagenes-->-----------------------------
  	<img src="images/swirl.png" width="1188" id="img1">
  </div>

   <!--Tabla de contenido-->
  <div id="contenido">
  
  	<table class="table table-hover table-condensed table-bordered" id="tabladinamicaload">
    <h2>Tabla De Usuarios</h2>
    
    <thead>
      <tr>
  			<td>Nombres</td>
  			<td>Apellidos</td>
  			<td>Identidad</td>
  			<td>Correo</td>
        <td>Usuario</td>
        <td>Nivel de Permiso</td>
        <td>Estado</td>
        <td>Editar</td>
       
        </tr>
  		</thead>
  		
     </body>
</html>
      
  HTML del menu desplegable, tambien esta en un archivo aparte
-----------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
        <link rel="stylesheet" href="MDIstyle.css">
    <title>MDI</title>
</head>
<body>

    <?php
        //comprobar si la sesion a sido correctamente abierta
     session_start();

    if(!isset($_SESSION["usuario"])) 
      {
    
      }

    ?>
    
        <div id="imagenes">
        <img src="logo1.JPG" style="width:300px;height:100px;">
        </div>
      
        
    <!--Contenido-->
    
    <div id="header">
            <div class="clearfix">  
     <!--Listas-->
     <nav>
    <ul class="nav">

     <li><a href="MDI_Admin.php">Inicio</a></li>
     
     <li><a href="">Registro</a>
        <ul>
        <li><a href="">Ingreso de expediente</a></li>
        <li><a href="">Busqueda de expediente</a>
           <ul>
            <li><a href="">No. Expediente</a></li>
            <li><a href="">Nombre Establecimiento</a></li>
           </ul> 
        </li>
        </ul>
    </li>

    <li><a href="">Tramitaciones</a>
        <ul>
        <li><a href="">Faces del Proceso</a></li>
        <li><a href="">Tipo de certificado</a>
            <ul>
            <li><a href="">Primera vez</a></li>
            <li><a href="">Renovacion</a></li>
            </ul>
        </li> 
        </ul>
    </li>

    <li><a href="">Reportes</a>
        <ul class="sub_menu">
        <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 class="sub_menu">
     <li><a href="tabla.php">Usuarios</a></li>
     <li><a href="">Crear Ubicaciones</a></li>
     </ul>
     </li>
     
     <li><a href="">Cuenta</a>
     <ul class="sub_menu">
        <li><a href="destruir_sesion.php">Cerrar Sesion</a></li>
        </ul>
    </li>
  </ul>
  </nav>
</div>
</div>
</body>
</html>

Gracias por sus respuestas :D!!

1
  • 5
    Estoy viendo que el desplegado de los submenús no lo haces por CSS. ¿Es posible que lo estés realizando con Javascript? De ser así seguramente el problema lo tengas en que en la nueva página no estés cargando ese fichero .js que se ocupa de realizar el desplegado de los submenús. La consola del navegador te debe de estar arrojando un error. En estos casos el pegarlo aquí facilita mucho la labor del que te quiera ayudar.
    – phpMyGuel
    Commented el 8 abr. 2019 a las 7:11

2 respuestas 2

1

Primero creo que deberias reorganizar el codigo, ya que por ejemplo en algunos casos tenes primero las etiquetas

  • conteniendo a las cuando deberia ser al revez.

    Tu codigo:

    <li><a href="">Cuenta</a>
         <ul class="sub_menu">
            <li><a href="destruir_sesion.php">Cerrar Sesion</a></li>
            </ul>
        </li>
    

    como deberia ser:

     <ul>
        <a href="">Cuenta</a>
        <li class="sub_menu"><a href="destruir_sesion.php">Cerrar Sesion</a></li>
     </ul>
    

    Aún asi deja dudas el orden de como propones el menu con las etiquetas y demas pero en principio ordenar esos detalles.

    Tambien en ningun momento estas utilizando las class "sub_menu" en tu archivo CSS que justamente es la clase que maneja tus submenus que no figuran.

    Te recomiendo te fijes para mayor orden e ideas en el siguiente link y espero que te sirva la información.

    https://www.w3schools.com/CSS/css_dropdowns.asp

    0

    Buen día, Soy nuevo jajaja, primero que todo yo busque en otras partes y encontré una forma de hacerlo, incluso el ejemplo lo complementa con responsive que es muy importante al hacer un menú.

    Primero el HTML

    <html lang="es">
    

    menuresponsive

    <nav>
        <div>
            <i class="material-icons">menu</i>
        </div>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Drop 1 <i class="material-icons">arrow_drop_down</i></a>
                <ul>
                    <li><a href="#">Product 1</a></li>
                    <li><a href="#">Product 2</a></li>
                    <li><a href="#">Product 3</a></li>
                    <li><a href="#">Product 4</a></li>
                </ul>
            </li>
            <li><a href="#">Drop 2 <i class="material-icons">arrow_drop_down</i></a>
                <ul>
                    <li><a href="#">Product 1</a></li>
                    <li><a href="#">Product 2</a></li>
                    <li><a href="#">Product 3</a></li>
                    <li><a href="#">Product 4</a></li>
                </ul>
            </li>
            <li><a href="#">About</a></li>
            <li><a href="#">FAQ</a></li>
        </ul>
    </nav>
    
    <script type="text/javascript">
        $("nav div").click(function (){
            $("ul").slideToggle();
            $("ul ul").css("display", "none");
        });
    
        $("ul li").click(function(){
            $("ul ul").slideUp();
            $(this).find('ul').slideToggle();
        });
    
        $(window).resize(function(){
            if($(window).whidth() > 768) {
                $("ul").removeAttr('style');
            }
        });
    
    </script>
    

    Después el Css

    $("nav div").click(function (){
    			$("ul").slideToggle();
    			$("ul ul").css("display", "none");
    		});
    
    		$("ul li").click(function(){
    			$("ul ul").slideUp();
    			$(this).find('ul').slideToggle();
    		});
    
    		$(window).resize(function(){
    			if($(window).whidth() > 768) {
    				$("ul").removeAttr('style');
    			}
    		});
    html {
    	font-family: 'Poppins', sans-serif;
    }
    body {
    	padding: 0;
    	margin: 0;
    }
    ul {
    	margin: 0;
    	padding: 0;
    	list-style-type: none;
    	background: #e3e3e3;
    	position: relative;
    }
    ul li {
    	display: inline-block;
    }
    ul li a {
    	color: #292929;
    	text-decoration: none;
    	padding: 15px;
    	display: block;
    }
    ul li:hover {
    	background: lightgrey;
    }
    ul ul {
    	position: absolute;
    	min-width: 200px;
    	background: lightgrey;
    	display: none;
    }
    ul ul li {
    	display: block;
    	background: #e3e3e3;
    }
    ul li:hover ul {
    	display: block;
    }
    ul li i {
    	color: #292929;
    	float: right;
    	padding-left: 5px;
    }
    nav div {
    	background: lightgrey;
    	color: #292929;
    	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 lang="es">
    <head>
    	<meta charset="UTF-8">
    	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    	<link rel="stylesheet" href="estilosmenu.css">
    	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    	<link href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600" rel="stylesheet">
    	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    	<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
    	<title>menuresponsive</title>
    </head>
    <body>
    
    	<nav>
    		<div>
    			<i class="material-icons">menu</i>
    		</div>
    		<ul>
    			<li><a href="#">Home</a></li>
    			<li><a href="#">Drop 1 <i class="material-icons">arrow_drop_down</i></a>
    				<ul>
    					<li><a href="#">Product 1</a></li>
    					<li><a href="#">Product 2</a></li>
    					<li><a href="#">Product 3</a></li>
    					<li><a href="#">Product 4</a></li>
    				</ul>
    			</li>
    			<li><a href="#">Drop 2 <i class="material-icons">arrow_drop_down</i></a>
    				<ul>
    					<li><a href="#">Product 1</a></li>
    					<li><a href="#">Product 2</a></li>
    					<li><a href="#">Product 3</a></li>
    					<li><a href="#">Product 4</a></li>
    				</ul>
    			</li>
    			<li><a href="#">About</a></li>
    			<li><a href="#">FAQ</a></li>
    		</ul>
    	</nav>	
    </body>
    </html>

    Listo si te das cuenta, hay un script que ayuda con el menu en dispositivos como tablets y smartphones, con esta estructura puedes modificar el tuyo, muy buen día, saludos desde Bogotá Colombia.

    2
    • Hola Holman, bienvenido y gracias por participar en el sitio. Te invito a que leas ¿Cómo responder?, ya que tu publicación, aunque muestra una alternativa viable, no responde la pregunta del OP. Commented el 9 abr. 2019 a las 14:34
    • 1
      Gracias me sirvio tu informacion
      – Darklawz
      Commented el 11 abr. 2019 a las 8:44

    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.