0

Tengo un menú de la siguiente forma:

body {
  font-family: sans-serif;
  width: 1080px;
  margin: 0;
  background-image: url(img/ottralogo.jpg);
  padding: 0;
  text-align: left;
  position: relative;
  margin-right: auto;
  margin-left: auto;
  color: white;
}


/*tablas del sistema*/

table {
  font-family: Sans-Serif;
  font-size: 14px;
  margin: 0;
  left: 10%;
  width: 100%;
  text-align: left;
  border-collapse: collapse;
}

table tr:nth-child(odd) {
  background-color: #81a2ac;
  font-weight: bold;
  font-size: 14px;
}

table tr:nth-child(even) {
  background-color: #d6ecf2;
  font-weight: bold
}

th {
  font-size: 14px;
  font-weight: normal;
  padding: 8px;
  background: #b9c9fe;
  border-top: 4px solid #aabcfe;
  border-bottom: 1px solid #fff;
  color: #039;
}

td {
  padding: 8px;
  border-bottom: 1px solid #fff;
  color: #669;
  border-top: 1px solid transparent;
}

tr:hover td {
  background: #d0dafd;
  color: #339;
}

.totales {
  float: right;
  width: 20%
}

select {
  color: blue;
}

.contenedor {
  position: relative;
  width: 965px;
  height: 1000px;
  margin: 0px auto;
  text-align: center;
}

.cabecera {
  width: 965px;
  height: 150px;
}

.cuerpo {
  width: 965px;
  height: 300px;
  font-size: 20px;
}

.pie {
  width: 965px;
  height: 150px;
}

table.precios tr {
  font-size: 30px;
}

div.panel-heading {
  font-size: 16px;
  font-weight: bold;
}

table.canilla tr {
  background-color: white;
  text-align: center;
  font-size: 20px;
}

table.canilla tr:nth-child(even) {
  background-color: #d6ecf2;
  font-weight: bold;
  font-size: 20px;
}

table.canilla th {
  background-color: yellowgreen;
  color: white;
  font-size: 16px;
  text-align: center;
}

select:focus {
  border-color: blue;
}

label.titulo {
  font-family: sans-serif;
  color: blue;
}

.totales th {
  width: 50%;
}

caption {
  font-family: sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: black;
  background: #d9edc2;
  border: 4px solid #b2ce96;
}


/*menu*/

.dropdownmenu ul,
.dropdownmenu li {
  margin: auto;
  padding: 0;
  width: 100%;
}

.dropdownmenu ul {
  background: gray;
  list-style: none;
  font-size: 14px;
}

.dropdownmenu li {
  float: left;
  position: relative;
  width: 20%;
}

.dropdownmenu a {
  background: #30A6E6;
  color: #FFFFFF;
  display: block;
  font: bold 12px/20px sans-serif;
  padding: 10px 25px;
  text-align: center;
  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: #000000;
}

.submenu {
  opacity: 0;
  position: absolute;
  visibility: hidden;
  z-index: 1;
  width: 100%;
}

li:hover ul.submenu {
  opacity: 1;
  visibility: visible;
}

.submenu li {
  float: none;
  width: 100%;
}

.submenu a:hover {
  background: #DF4B05;
}

.submenu a {
  background-color: #000000;
}

.botonimagenrefresh {
  background-image: url('iconos/refresh.png');
  background-repeat: no-repeat;
  background-position: left;
  background-color: grey;
  font: sans-serif;
  border: 0px;
}

div {
  margin: auto;
  width: 100%;
}

h3 {
  font: sans-serif;
}
<div class="row">
  <nav class="dropdownmenu">
    <ul>
      <li><a href="">ABM</a>
        <ul class="submenu" id="a">
          <li><a href="index.php?controller=cliente&action=index">Clientes</a></li>
          <li><a href="index.php?controller=articulo&action=index">Articulos</a></li>
          <li><a href="index.php?controller=proveedor&action=index">Proveedores</a></li>
          <li><a href="index.php?controller=envase&action=todos">Envases</a></li>
          <li><a href="index.php?controller=medida&action=index">Medidas</a></li>
          <li><a href="index.php?controller=canilla&action=index">Canillas</a></li>
          <li><a href="index.php?controller=user&action=index">Usuarios</a></li>
        </ul>
      </li>
      <li><a href="">Nuevo comprobante</a>
        <ul class="submenu" id="b">
          <li><a href="index.php?controller=ticket&action=index">Ticket</a></li>
          <li><a href="index.php?controller=facturaa&action=index">Factura</a></li>
        </ul>
      </li>

Y quiero dentro de Artículo desplegar un submenú hacia la derecha que diga Marca y Categoría, para el alta de estas dos tablas que están relacionadas.

¿De qué manera podría hacerlo?

1
  • Hola @Caruso rechacé tu edición en la respuesta de Orichi, el código que te hace falta va en tu pregunta y NO en su respuesta ya que si haces eso se considera vandalismo pues alteras el aporte de alguien mas
    – user75901
    Commented el 6 ene. 2019 a las 22:46

2 respuestas 2

1

Este sería tu dropdown multinivel con HTML y CSS (y sin JS). Es necesario cambiar varias lineas de tu código para que quede como deseas. Agrega el CSS que te pongo en este ejemplo y verifica... Estas son las imágenes del resultado obtenido con este ejemplo.

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">

<!-- este es el CSS que debes agregar al que ya tienes-->
<style>
    .sidebar-nav {
        padding: 9px 0;
    }

    .dropdown-menu .sub-menu {
        left: 100%;
        position: absolute;
        top: 0;
        visibility: hidden;
        margin-top: -1px;
    }

    .dropdown-menu li:hover .sub-menu {
        visibility: visible;
    }

    .dropdown:hover .dropdown-menu {
        display: block;
        background: black;
    }

    .nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu {
        margin-top: 0;
    }

    .navbar .sub-menu:before {
        border-bottom: 7px solid transparent;
        border-left: none;
        border-right: 7px solid rgba(0, 0, 0, 0.2);
        border-top: 7px solid transparent;
        left: -7px;
        top: 10px;
    }
    .navbar .sub-menu:after {
        border-top: 6px solid transparent;
        border-left: none;
        border-right: 6px solid #fff;
        border-bottom: 6px solid transparent;
        left: 10px;
        top: 11px;
        left: -6px;
    }
    .navbar-collapse.collapse {
        background: black;
    }

    .dropdown-menu>li>a, .navbar-nav>li>a{
        color: white;
    }

    .navbar-nav>li>a:hover {
        color: black;
    }
</style>
</head>
<body>
<div id="navbar" class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
        <li class="dropdown">
            <a href="#" data-toggle="dropdown" class="dropdown-toggle">ABM</a>
            <ul class="dropdown-menu">
                <li><a href="#">Clientes</a></li>
                <li><a href="#">Artículos <span class="caret"></span></a>
                   <ul class="dropdown-menu sub-menu">
                        <li><a href="#">Marca</a></li>
                        <li><a href="#">Categoría</a></li>
                    </ul>
                </li>
                <li><a href="#">Proveedores </a></li>
                <li><a href="#">Envases </span></a></li>
                <li><a href="#">Medidas </span></a></li>
                <li><a href="#">Canillas </span></a></li>
                <li><a href="#">Usuarios </span></a></li>
            </ul>
        </li>
        <li class="dropdown">
            <a href="#"  data-toggle="dropdown" class="dropdown-toggle">Nuevo Comprobante</a>
            <ul class="dropdown-menu">
                <li><a href="#">Ticket</a></li>
                <li><a href="#">Factura</a></li>
            </ul>
        </li>  
    </ul>      
</div>
</body>
</html>
13
  • entonces mi codigo como quedaria? tengo los ul de class submenu. A subes el li de articulo seria de clase test. y luego deberia ejecutarse el codigo de js pero no me funciona
    – Caruso
    Commented el 5 ene. 2019 a las 11:58
  • @caruso Voy a tratar de hacerlo sin JS para no enredarte, pero, mientras tanto necesito que por favor agregues tus estilos CSS en la pregunta... así será más fácil replicar tus errores.
    – DjCrazy
    Commented el 5 ene. 2019 a las 22:48
  • Ahi agregue el codigo CSS, muchas gracias
    – Caruso
    Commented el 6 ene. 2019 a las 18:53
  • @caruso como te comenta shadow debes agregar el código CSS editando tu pregunta...
    – DjCrazy
    Commented el 8 ene. 2019 a las 12:15
  • 1
    @Caruso Agrega esto: .navbar-nav { width: 100%; text-align: center; display: flex; justify-content: space-evenly; }
    – DjCrazy
    Commented el 10 ene. 2019 a las 18:20
0

Si sólo quieres agregar las opciones al menú siguiendo el estilo visual:

<div class="row" >
<nav class="dropdownmenu">
  <ul>
    <li><a href="">ABM</a>
    <ul class="submenu" id="a">
        <li ><a href="index.php?controller=cliente&action=index">Clientes</a></li>
        <li ><a href="index.php?controller=articulo&action=index">Articulos</a>
<ul>
<li>
    <a href="">Marca</a>
</li>
<li>
    <a href="">Categoría</a>
</li>
</ul>
</li> 
        <li ><a href="index.php?controller=proveedor&action=index">Proveedores</a></li>
        <li ><a href="index.php?controller=envase&action=todos">Envases</a></li>
        <li ><a href="index.php?controller=medida&action=index">Medidas</a></li>
        <li ><a href="index.php?controller=canilla&action=index">Canillas</a></li>
        <li ><a href="index.php?controller=user&action=index">Usuarios</a></li>
      </ul>
    </li>
    <li><a href="">Nuevo comprobante</a>
    <ul class="submenu"  id="b">
        <li ><a href="index.php?controller=ticket&action=index">Ticket</a></li>
   <li ><a href="index.php?controller=facturaa&action=index">Factura</a></li>
    </ul>
    </li>

Los enlaces y la lógica tienes que añadirlos tu, si es esto lo que requieres te falta bastante código en la pregunta.

2
  • Esto lo intente, pero se ve uno debajo de otro, yo quiero que marca y categoria esten dentro de articulo.-
    – Caruso
    Commented el 4 ene. 2019 a las 12:03
  • @Caruso Añade entonces el CSS correspondiente en tu pregunta, o por lo menos una imagen que describa lo que quieres. Commented el 4 ene. 2019 a las 12:05

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.