Skip to main content
crear mcve con toda la información + corregir ortografía
Origen Enlace
Alvaro Montoro
  • 49.8k
  • 28
  • 109
  • 190

Desplegar menumenú dentro de otro hacia la derecha

Tengo un menumenú de la siguiente forma:

<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 Articulo desplegar un submenu hacia la derecha que diga Marca y Categoria, para el alta de estas dos tablas que estan relacionadas.

De que manera podria hacerlo?

Este es el CSS que uso actualmente:

body {
  font-family: sans-serif;
  width: 1080px;
  margin:0; 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;  relative;
  width:965px; 965px;
  height:1000px; 1000px;
  margin: 0px auto; 
  text-align: center;
}

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

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

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

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

div.panel-heading {
  font-size:16px; 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; 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?

Desplegar menu dentro de otro hacia la derecha

Tengo un menu de la siguiente forma:

<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 Articulo desplegar un submenu hacia la derecha que diga Marca y Categoria, para el alta de estas dos tablas que estan relacionadas.

De que manera podria hacerlo?

Este es el CSS que uso actualmente:

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

Desplegar menú dentro de otro hacia la derecha

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?

Se identa Código CSS para mejorar la visualización.
Origen Enlace
body {
  font-family:sans-serif;widthserif;
  width: 1080px;margin1080px;
  margin:0; 
  background-image: url(img/ottralogo.jpg);
  padding:0;text0;
  text-align: left;positionleft;
  position: relative;marginrelative;
  margin-right: auto;marginauto;
  margin-left:auto;colorauto;
  color: white;  
}
/*tablas del sistema*/
table {     
  font-family: Sans-Serif;
    font-size: 14px;  
  margin: 0;left0;
  left: 10%;  
  width: 100%; 
  text-align: left;   
  border-collapse: collapse;  
} 

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

table tr:nth-child(even) {
  background-color: #d6ecf2;font#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;font300px;
  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;textwhite;
  text-align: center;fontcenter;
  font-size:20px; 
} 

table.canilla tr:nth-child(even) {
  background-color: #d6ecf2;font#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;
}
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;
}
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;
}
se añadieron 3789 caracteres en el cuerpo
Origen Enlace
Caruso
  • 921
  • 15
  • 28

Este es el CSS que uso actualmente:

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

Este es el CSS que uso actualmente:

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

etiquetas editadas
Enlace
Orici
  • 7.8k
  • 13
  • 50
  • 89
Loading
Origen Enlace
Caruso
  • 921
  • 15
  • 28
Loading