0

Tengo estos menus, que quiero que se alineen de izquierda a derecha pegados a la palabra que esta al lado de la imagen (SAE)

.dropdownmenu ul, .dropdownmenu li {
    margin: 0;
    padding: 0;
}
.dropdownmenu ul {
    background: gray;
    list-style: none;
    width: 100%;
}
.dropdownmenu li {
    float: left;
    position: relative;
    width:auto;
}
.dropdownmenu a {
    background: #0c66a2;
    color: #FFFFFF;
    display: block;
    font: 8px/8px sans-serif;
    padding: 10px 30px;
    text-align: left;
    text-decoration: none;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
}
.dropdownmenu li:hover a {
    background: #28a745;
}
#submenu {
    left: 0;
    opacity: 0;
    position: absolute;
    top: 35px;
    visibility: hidden;
    z-index: 1;
}
li:hover ul#submenu {
    opacity: 1;
    top: 40px;  /* adjust this as per top nav padding top & bottom comes */
    visibility: visible;
}
#submenu li {
    float: none;
    width: 200%;
}
#submenu a:hover {
    background: #28a745;
}
#submenu a {
    background-color:#28a745;
}
<nav class="navbar navbar-expand-md navbar-dark bg-dark2">
  <div class="container">
    <a class="navbar-brand" href="index.html">
      <font size="1">SAE || SISTEMA DE ADMINISTRACION ENLACE</font>
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse justify-content-end" id="navbarsExampleDefault">
      <!--<a href="http://pacos.itink.info/">Cerrar Sesion <span class="sr-only">(current)</span></a> --> 
      <nav class="dropdownmenu">
        <ul>
          <li><a href="index2.php">HOME</a></li>
          <li><a href="#">PACOS</a>
            <ul id="submenu">
              <!--<li><input type="button" id="pack" class="btn" and style="background-color:transparent">PACOS EXISTENTES</li>-->
              <li><a href="index.php">AÑADIR NUEVO</a></li>
              <li><a href="pagoparcial.php">PACOS PAGO PARCIAL</a></li>
              <li><a href="liberar.php">LIBERAR PACO</a></li>
              <li><a href="nocerrado.php">PACOS GUARDADOS</a></li>
              <li><a href="asignarpaco70.php">ASIGNAR OS A PACO</a></li>
            </ul>
          </li>
          <li><a href="#">REPORTES</a>
            <ul id="submenu">
              <li><a href="despa.php">CONSOLIDADO DE PACOS</a></li>
              <li><a href="pagados.php">PACOS PAGADOS</a></li>
              <li><a href="pagados.php">PACOS COMPARTIDOS</a></li>
              <li><a href="autorizar.php">PACOS PENDIDNTE AUTORIZAR</a></li>
              <li><a href="ppago.php">PACOS PENDIENTES DE PAGO</a></li>
              <li><a href="pfactura.php">PACOS PENDIENTES DE FACTURA</a></li>
              <li><a href="rfacpa.php">FACTURAS PAGADAS</a></li>
              <li><a href="fpp.php">FACTURAS PENDIENTES DE PAGO</a></li>
              <li><a href="asignarpaco70.php">OS SIN PACO</a></li>
            </ul>
          </li>
      </nav>
    </div>
  <a href="http://pacos.itink.info/" class="btn btn-success">Cerrar Sesion</a>

Asi es como se ve y busco que esten a la izquierda

3
  • estás con algún framework de css? Commented el 23 ene. 2019 a las 18:11
  • Creo que si amigo, acabo de tomar este proyecto y tengo que hacer eso, apenas voy descubriendo lo que hace Commented el 23 ene. 2019 a las 18:25
  • tienes la página en linea para ver con mayor detalle? Commented el 23 ene. 2019 a las 18:31

1 respuesta 1

0

Revisa si esto se aproxima a lo que deseas... Ver snnipet en pagina completa

Debí agregar la dependencia de Bootstrap, eliminé el primer botón y cerré varias etiquetas que tienes abiertas.

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <style>
      .dropdownmenu ul, .dropdownmenu li {
        margin: 0;
        padding: 0;
    }
    .dropdownmenu ul {
        background: gray;
        list-style: none;
        width: 100%;
    }
    .dropdownmenu li {
        float: left;
        position: relative;
        width:auto;
    }
    .dropdownmenu a {
        background: #0c66a2;
        color: #FFFFFF;
        display: block;
        font: 8px/8px sans-serif;
        padding: 10px 30px;
        text-align: left;
        text-decoration: none;
        -webkit-transition: all .25s ease;
        -moz-transition: all .25s ease;
        -ms-transition: all .25s ease;
        -o-transition: all .25s ease;
        transition: all .25s ease;
    }
    .dropdownmenu li:hover a {
        background: #28a745;
    }
    #submenu {
        left: 0;
        opacity: 0;
        position: absolute;
        top: 35px;
        visibility: hidden;
        z-index: 1;
    }
    li:hover ul#submenu {
        opacity: 1;
        top: 40px;  /* adjust this as per top nav padding top & bottom comes */
        visibility: visible;
    }
    #submenu li {
        float: none;
        width: 200%;
    }
    #submenu a:hover {
        background: #28a745;
    }
    #submenu a {
        background-color:#28a745;
    }
    </style>
  </head>
  <body>
    <nav class="navbar navbar-expand-md navbar-dark bg-dark2">
      <div class="container">
        <a class="navbar-brand" href="index.html"><font size="1">SAE || SISTEMA DE ADMINISTRACION ENLACE</font></a>
        <nav class="dropdownmenu">
          <ul>
            <li><a href="index2.php">HOME</a></li>
            <li><a href="#">PACOS</a>
              <ul id="submenu">
                <!--<li><input type="button" id="pack" class="btn" and style="background-color:transparent">PACOS EXISTENTES</li>-->
                <li><a href="index.php">AÑADIR NUEVO</a></li>
                <li><a href="pagoparcial.php">PACOS PAGO PARCIAL</a></li>
                <li><a href="liberar.php">LIBERAR PACO</a></li>
                <li><a href="nocerrado.php">PACOS GUARDADOS</a></li>
                <li><a href="asignarpaco70.php">ASIGNAR OS A PACO</a></li>
              </ul>
            </li>
            <li><a href="#">REPORTES</a>
              <ul id="submenu">
                <li><a href="despa.php">CONSOLIDADO DE PACOS</a></li>
                <li><a href="pagados.php">PACOS PAGADOS</a></li>
                <li><a href="pagados.php">PACOS COMPARTIDOS</a></li>
                <li><a href="autorizar.php">PACOS PENDIDNTE AUTORIZAR</a></li>
                <li><a href="ppago.php">PACOS PENDIENTES DE PAGO</a></li>
                <li><a href="pfactura.php">PACOS PENDIENTES DE FACTURA</a></li>
                <li><a href="rfacpa.php">FACTURAS PAGADAS</a></li>
                <li><a href="fpp.php">FACTURAS PENDIENTES DE PAGO</a></li>
                <li><a href="asignarpaco70.php">OS SIN PACO</a></li>
              </ul>
            </li>
          </ul>
        </nav>
        <a href="http://pacos.itink.info/" class="btn btn-success">Cerrar Sesion</a>
      </div>
    </nav>
  </body>
</html>

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.