Display menu within another to the right

0

I have a menu in the following way:

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>

And I want within Article to display a submenu to the right that says Brand and Category, for the registration of these two tables that are related.

How could I do it?

    
asked by Caruso 04.01.2019 в 12:43
source

2 answers

1

This would be your multi-level dropdown with HTML and CSS ( and without JS ). It is necessary to change several lines of your code to be as you wish. Add the CSS that I put in this example and verify ... These are the images of the result obtained with this example.

<!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>
    
answered by 04.01.2019 / 14:16
source
0

If you only want to add the options to the menu following the visual style:

<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>

The links and the logic you have to add them to you, if this is what you need you lack enough code in the question.

    
answered by 04.01.2019 в 12:53