0

quiero su colaboración para la solución del siguiente inconveniente, requiero alinear el menú emergente, actualmente me sale con un desplazamiento y no se como hacerlo para que se despliegue debajo, muestro ejemplo
introducir la descripción de la imagen aquí

quiero que la parte despegable se alinee con la caja superior, además el ancho de la caja es muy grande y deseo que adapte el tamaño del menú principal

este es el html

<!DOCTYPE html>
<html lang="es">
 <head>
   <meta charset="UTF-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>TCNhjkhR</title>
   <link href="https://fonts.googleapis.com/css?family=Roboto:300&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="css/style.css" />
   <link rel="stylesheet" href="css/fontello.css" />
   <script
     src="https://kit.fontawesome.com/7e5b2d153f.js"
     crossorigin="anonymous"
   ></script>
   <script defer src="javascript/index.js"></script>
 </head>   
   <header class="header">
     
     <nav class="nav">
       
       <ul class="nav-menu">
         <li class="nav-menu-item">
           <a href="#" class="nav-menu-link nav-link">Inicio</a>
         </li>
         
             <li class="nav-menu-item">
               <a href="#" class="nav-menu-link nav-link nav-menu-link_active">SERVICIOS <i class="fas fa-arrow-down"></i></a>
               <ul class="submenu">
                   <li class="nav-menu">
                     <a href="#" class="nav-menu-link nav-link">Mecanica</a>
                   </li>
                   <li class="nav-menu">
                     <a href="#" class="nav-menu-link nav-link">Repuestos</a>
                   </li>
               </ul>
             </li>
         
         <li class="nav-menu-item">
           <a href="#" class="nav-menu-link nav-link ">Flota</a>
         </li>
         <li class="nav-menu-item">
           <a href="#" class="nav-menu-link nav-link "
             >Cotiza</a
           >
         </li>
         
       </ul>
     </nav>
   </header>
</html>

y continuación el css de la caja

.container-submenu{
  position: relative;
}
.submenu{
  position: absolute;
  top: 60px; 
  overflow: visible;
  z-index: 400;
  opacity: 1;
  visibility: hidden;
}
.submenu .nav-menu-link{
  background: #fff200;
  padding-left: 10px;
  width: 130px;
  
}
.nav-menu-item:hover .submenu{
opacity: 1;
visibility: visible;
}
.submenu .nav-menu-link nav-link{
background: #333;
padding-left:58px ;

}

gracias por su colaboración y espero una pronta respuesta

1 respuesta 1

0

Lo que se muestra en la imagen no se corresponde mucho con el código que compartes, pero me da la impresión de que el problema en el código es un padding-left:58px que tienes asociado a la clase ".submenu .nav-menu-link nav-link" (en la que por cierto, falta un punto y juntar las clases para que quede de este modo se aplique correctamente las propiedades que intentas darle. Quedaría del siguiente modo: ".submenu .nav-menu-link.nav-link").

He modificado ligeramente el código para que (en función del que tu compartes) los elemento queden alinéados como tu comentabas. He eliminado el padding-left y aplicado un display:inline al listado para que se vea más claro el ejemplo.

.nav-menu > li {display:inline; }
    
    .submenu{
      position: absolute;
      top: 40px; 
      overflow: visible;
      z-index: 400;
      opacity: 1;
      visibility: hidden;
    }
    
    .submenu .nav-menu .nav-menu-link{
      background: #fff200;
      padding-left: 0px;
      width: 130px;
    }
    .nav-menu-item:hover .submenu{
    opacity: 1;
    visibility: visible;
    }
    .submenu .nav-menu-link.nav-link{
    background: #333;
    color: #ffffff;
    }
    
    .submenu > li {list-style:none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header class="header">
         <nav class="nav">
           <ul class="nav-menu">
             <li class="nav-menu-item">
               <a href="#" class="nav-menu-link nav-link">Inicio</a>
             </li>

                 <li class="nav-menu-item">
                   <a href="#" class="nav-menu-link nav-link nav-menu-link_active">SERVICIOS <i class="fas fa-arrow-down"></i></a>
                   <ul class="submenu">
                       <li class="nav-menu">
                         <a href="#" class="nav-menu-link nav-link">Mecanica</a>
                       </li>
                       <li class="nav-menu">
                         <a href="#" class="nav-menu-link nav-link">Repuestos</a>
                       </li>
                   </ul>
                 </li>

             <li class="nav-menu-item">
               <a href="#" class="nav-menu-link nav-link ">Flota</a>
             </li>
             <li class="nav-menu-item">
               <a href="#" class="nav-menu-link nav-link "
                 >Cotiza</a
               >
             </li>
           </ul>
         </nav>
       </header>

Espero que esto pueda resultarte de ayuda, pero si no es así por favor, comparte de nuevo tu código y deja alguna aclaración más en la pregunta o en comentarios para ver si así podemos ayudarte un poco más.

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.