Un poco de ayuda con este menu porfavor

Intersystem · 26 Abr 2011, 22:46 · Solicitar retirada

Hola wemasters. mi duda es la siguiente..
tome de por ahi prestado un script para realizar un menu vertical en mi web.
Ahora.. el menu esta diseñado en posición horizontal y yo lo necesito en vertical (con los submenus desplegando hacia la derecha).

les dejo el código del html y del css.

HTML

<link rel="stylesheet" href="dropdown.css" type="text/css" />
<script type="text/javascript" src="dropdown.js"></script>
<style type="text/css">

</style>
</head>
<body><dl class="dropdown">
<dt id="one-ddheader" onMouseOver="ddMenu('one',1)" onMouseOut="ddMenu('one',-1)">Menú Nicolás 1</dt>
<dd id="one-ddcontent" onMouseOver="cancelHide('one')" onMouseOut="ddMenu('one',-1)">
<ul>
<li><a href="http://www.wgamers.net/foro/index.php" class="underline">link1</a>/li>
<li><a href="http://www.wgamers.net/foro/index.php" class="underline">link2</a>/li>
<li><a href="http://www.wgamers.net/foro/index.php" class="underline">link3</a>/li>
<li><a href="http://www.wgamers.net/foro/index.php" class="underline">link4</a>/li>
</ul>
</dd>
</dl>

CSS

body {margin:25px; font:12px Verdana, Arial, Helvetica}
* {padding:0; margin:0}
.dropdown {float:left; padding-right:5px}
.dropdown dt {width:188px; border:2px solid #9ac1c9; padding:8px; font-weight:bold; cursor:pointer; background:url(images/header.gif)}
.dropdown dt:hover {background:url(images/header_over.gif)}
.dropdown dd {position:relative; overflow:hidden; width:208px; display:none; background:#fff; z-index:200; opacity:0}
.dropdown ul {width:204px; border:2px solid #9ac1c9; list-style:none; border-top:none}
.dropdown li {display:block}
.dropdown a, .dropdown a:active, .dropdown a:visited {display:block; padding:5px; color:#333; text-decoration:none; background:#eaf0f2; width:194px}
.dropdown a:hover {background:#d9e1e4; color:#000}
.dropdown .underline {border-bottom:1px solid #b9d6dc}

fuente: http://vagabundia.blogspot.com/2008/06/menes-con-efectos.html

(esta un poco retocado simplificado el código)

ricky · 26 Abr 2011, 22:54 · Solicitar retirada

UHHH ese JMur de vagabundia si que es un maestro.. en cuanto a lo tuyo es mejor que busques otro en html y css puro hecho de la forma que quieres, este usa un script y es posible que debas cambiar algo ahi (ese es optimizado para blogger).

lantiga · 27 Abr 2011, 00:16 · Solicitar retirada

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
<html lang="es">
<head>
<title></title>
<link rel="stylesheet" href="dropdown.css" type="text/css" />
<script type="text/javascript" src="dropdown.js"></script>
<style type="text/css">

body { background-color: #87CEFA; margin:25px; font:12px Verdana, Arial, Helvetica}

/*dropdown (del ingles desplegable) contiene la propiedad de flotrar a la izquierda y el fondo verde */

.dropdown { background-color:#7FFF00;float:left; }

/* el desplegable dt conun fondo marrón; un borde de 2px de color gris */
.dropdown dt {background-color:#CDBE70; width:188px; border:2px solid #9ac1c9; padding:8px; font-weight:bold; style="cursor: pointer;"}

.dropdown dt:hover
/*.dropdown dd {position:relative; overflow:hidden; width:208px; display:none; background-color:#EEC900; z-index:200; opacity:0}*/
.dropdown ul {width:204px; border:2px solid #9ac1c9; list-style:none; border-top:none}
.dropdown li {display:block}
.dropdown a,
.dropdown a:active,
.dropdown a:visited {display:block; padding:5px; color:#333; text-decoration:none; background:#eaf0f2; width:194px}
.dropdown a:hover {background:#d9e1e4; color:#000}*/
.underline {background-color:#CDCDB4;border:2px solid #b9d6dc}

</style>
</head>
<body>
<dl class="dropdown">
<dt id="one-ddheader" onMouseOver="ddMenu('one',1)" onMouseOut="ddMenu('one',-1)">Menú Nicolás 1</dt>
<dd id="one-ddcontent" onMouseOver="cancelHide('one')" onMouseOut="ddMenu('one',-1)">
<ul>
<li><a href="http://www.wgamers.net/foro/index.php" class="underline">link1</a></li>
<li><a href="http://www.wgamers.net/foro/index.php" class="underline">link2</a></li>
<li><a href="http://www.wgamers.net/foro/index.php" class="underline">link3</a></li>
<li><a href="http://www.wgamers.net/foro/index.php" class="underline">link4</a></li>
</ul>
</dd>
</dl>

</head>
<body>

</body>
</html>

pruebalo y me cuentas?

Intersystem · 27 Abr 2011, 13:51 · Solicitar retirada

Muchas gracias por la respuesta pero no me funcionó..
lo intente algunas veces pero nada, no se obtiene un menu.

:S

Intersystem · 27 Abr 2011, 14:16 · Solicitar retirada

Ok luego de buscar y rebuscar le encontre la vuelta.
debia cambiar una cualidad en el css y modificar apropiadamente los id de los bloques.

quedando asi:

CSS
body {margin:25px; font:12px Verdana, Arial, Helvetica}
* {padding:0; margin:0}
.dropdown { /* para el menú vertical */
display: block;
position:relative}
.dropdown dt {width:188px; border:2px solid #9ac1c9; padding:8px; font-weight:bold; cursor:pointer; background:url(images/header.gif)}
.dropdown dt:hover {background:url(images/header_over.gif)}
.dropdown dd {position:relative; overflow:hidden; width:208px; display:none; background:#fff; z-index:200; opacity:0}
.dropdown ul {width:204px; border:2px solid #9ac1c9; list-style:none; border-top:none}
.dropdown li {display:block}
.dropdown a, .dropdown a:active, .dropdown a:visited {display:block; padding:5px; color:#333; text-decoration:none; background:#eaf0f2; width:194px}
.dropdown a:hover {background:#d9e1e4; color:#000}
.dropdown .underline {border-bottom:1px solid #b9d6dc}

html

<dl class="dropdown">
<dt id="one-ddheader" onMouseOver="ddMenu('one',1)" onMouseOut="ddMenu('one',-1)">Controladores Fiscales</dt>
<dd id="one-ddcontent" onMouseOver="cancelHide('one')" onMouseOut="ddMenu('one',-1)">
<ul>
<li><a href="http://www.wgamers.net/foro/index.php" class="underline">Registradoras Fiscales</a></li>
<li><a href="http://www.wgamers.net/foro/index.php" class="underline">Impresores fiscales formato ticket</a></li>
<li><a href="http://www.wgamers.net/foro/index.php" class="underline">Impresores fiscales formato hoja</a></li>
<li><a href="http://www.wgamers.net/foro/index.php" class="underline">Centro integral de facturación</a></li>
<li><a href="http://www.wgamers.net/foro/index.php" class="underline">Puntos de venta fiscales</a></li>
</ul>
</dd>
</dl>
<dl class="dropdown">
<dt id="two-ddheader" onMouseOver="ddMenu('two',1)" onMouseOut="ddMenu('two',-1)">Cres Fiscales</dt>
<dd id="two-ddcontent" onMouseOver="cancelHide('two')" onMouseOut="ddMenu('two',-1)">
<ul>
<li><a href="http://www.wgamers.net/foro/index.php" class="underline"> Fiscales</a></li>
<li><a href="http://www.wgamers.net/foro/index.php" class="underline"> formato ticket</a></li>
<li><a href="http://www.wgamers.net/foro/index.php" class="underline">Impresles formato hoja</a></li>
<li><a href="http://www.wgamers.net/foro/index.php" class="underline">Centro il de facturación</a></li>
<li><a href="http://www.wgamers.net/foro/index.php" class="underline">Puntta fiscales</a></li>
</ul>
</dd>
</dl>

AHI HAY UN EJEMPLO DE 2 BLOQUES.

AHORA LA GRAN DUDA ES QUE CUANDO DESPLIEGO EL BLOQUE 1 ME ARRASTRA EL BLOQUE 2 HACIA ABAJO... Ya que los SUBMENUS no se despliegan del todo al costado derecho, sino que quedan un poco por debajo y se chocan.

me explico?

Lo subo al servidor asi lo ven:

http://www.intersystem-arg.site90.net/Untitled-1.html

AYUDA!

Intersystem · 27 Abr 2011, 20:14 · Solicitar retirada

Nada?nada? alguien?

ricky · 28 Abr 2011, 00:01 · Solicitar retirada

Busca en la seccion correspondiente de esta web y encontraras, o en google, si no quieres intentarlo tu mismo, lo que pasa es que a nadie le da ganas de ponerse a corregir algo que se descarga ya hecho.

Intersystem · 28 Abr 2011, 16:04 · Solicitar retirada

Es que realmente no consigo modificar correctamente el código porque no se como hacerlo de manera adecuada ni se me ocurre por eso es que pido ayuda.

Otra cosa que no logro es en el mena, en algunos casos no quiero desplegar submenus sino que quiero que al hacer click en el ítem me envíe a otra seccion. ¿ alguno podría decirme como añadir eso sin modificar el script sin la visualización?

ricky · 28 Abr 2011, 22:54 · Solicitar retirada

Para cambiar ese comportamiento deberia ser en el fichero javascript "dropdown.js" porque sin el, el menu no funciona, ya que sus partes son

<dl class="dropdown">

, este menu no depende solo de html y css, sino tambien de ese script.

En cuanto a quitar submenus, solo debes quitar todos los listados de ese menu (<li></li>) y dejar el elemento principal que normalmente seria "<ul></ul>" u "<ol></ol>" con el enlace.

Pero este usa elementos de glosario:
<dl> </dl>
inicio y fin de un glosario (como explicacion en un diccionario de varios terminos)
<dt> </dt>
cada uno de los terminos a explicar en el glosario
<dd> </dd>
la explicacion de cada termino del glosario va adentro de <dt> </dt>

busca su equivalente

Yo sigo aconsejandote dejar ese que esta optimizado para blogger y que busques uno en html y css.

Intersystem · 29 Abr 2011, 17:44 · Solicitar retirada

Primero muchas gracias por responder.
Segundo no realice otro porque no encontre uno de estas caracteristicas en html y css.
este venía armado y solo fue cuestion de insertarlo y modificarlo.

y es para mi empresa y les gusto este diseño asi que si sabes de alguno parecido te agradeceria me hicieras saber.

Por otro lado lo que intento decir es que yo logré que no se desplieguen los submenus en algunas secciones pero no logro insertar el link en el boton mira..

-Menu ---Submenu1
|-----submenu 2
|
-Menu ---Submenu1
|----- submenu 2
|
-Menu [acá quiero poner el link sin que se despliegue.]

ricky · 30 Abr 2011, 01:27 · Solicitar retirada

Es algo como esto? :click aqui

Intersystem · 2 May 2011, 13:52 · Solicitar retirada

Exactamente asi
pero donde encuentro ese tuto?

o el codigo para modificar colores y demás

ricky · 2 May 2011, 17:43 · Solicitar retirada

Html

<!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<title>menu desplegable css</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="css/menu_4niveles.css" type="text/css" />


</head>
<body>
<div id="menu">
<ul>
<li class="nivel1 primera"><a href="#" class="nivel1">opción 1</a>

<ul class="nivel2">
<li class="primera"><a href="#">opción 1.1</a></li>
<li><a href="#">opción 1.2</a></li>
</ul>

</li>
<li class="nivel1"><a href="#" class="nivel1">opción 2</a>

<ul class="nivel2">
<li class="primera"><a href="#" class="nivel1">opción 2.1</a>


<ul class="nivel3">
<li class="primera"><a href="#" class="nivel1">opción 2.1.1</a>


<ul class="nivel4">
<li class="primera"><a href="#">opción 2.1.1.1</a></li>
<li><a href="#">opción 2.1.1.2</a></li>
<li><a href="#">opción 2.1.1.3</a></li>
</ul>


</li>
<li><a href="#">opción 2.1.2</a></li>
<li><a href="#">opción 2.1.3</a></li>
</ul>


</li>
<li><a href="#">opción 2.2</a></li>
<li><a href="#">opción 2.3</a></li>
<li><a href="#">opción 2.4</a></li>
<li><a href="#">opción 2.5</a></li>
</ul>

</li>
<li class="nivel1"><a href="#" class="nivel1">opción 3</a>

<ul class="nivel2">
<li class="primera"><a href="#">opción 3.1</a></li>
<li><a href="#">opción 3.2</a></li>
<li><a href="#">opción 3.3</a></li>
</ul>

</li>
<li class="nivel1"><a href="#" class="nivel1">opción 4</a>

<ul class="nivel2">
<li class="primera"><a href="#">opción 4.1</a></li>
<li><a href="#">opción 4.2</a></li>
<li><a href="#">opción 4.3</a></li>
<li><a href="#">opción 4.4</a></li>
</ul>

</li>
<li class="nivel1"><a href="#" class="nivel1">opción 5</a>

<ul class="nivel2">
<li class="primera"><a href="#">opción 5.1</a></li>
<li><a href="#">opción 5.2</a></li>
<li><a href="#">opción 5.3</a></li>
</ul>

</li>
</ul>
</div>
</body>
</html>

css

* { margin: 0px;padding: 0px; outline: 0;}html, body { width: 100%;}body { background: #366;font-family: Verdana, arial, helvetica, sans-serif;}#menu { font-size: 0.7em;margin: 20px;}#menu ul { list-style-type: None;}#menu ul li.nivel1 { width: 162px;}#menu ul li { text-align: Center;}#menu ul li.primera { border-top: Solid 1px #fff;}#menu ul li a {display: Block;text-decoration: None;color: #fff;background-color: #399;border: Solid 1px #fff;border-top: None;padding: 8px 8px 9px;position: Relative;}#menu ul li:hover {position: Relative;background-color: #6cc;color: #000;}#menu ul li a:hover, #menu ul li:hover a.nivel1 {background-color: #6cc;color: #000;position: Relative;}#menu ul li a.nivel1 {display: Block!important;display: None;position: Relative;}#menu ul li ul {display: None;}#menu ul li:hover > ul {display: Block;position: Absolute;left: 161px;top:-1px;}#menu ul li ul li a {width: 144px;background-color: #399;color: #fff;position: Relative;}#menu ul li ul li a:hover {position: Relative;background-color: #6cc;color: #000;}#menu ul li a.nivel1ie {width: 144px;padding: 8px;}#menu ul li a.subnivel {padding-bottom: 8px;}#menu ul li a:hover ul.nivel2, #menu ul.nivel2 li a:hover ul.nivel3, #menu ul.nivel3 li a:hover ul.nivel4 {display: Block;position: Absolute;left: 160px;top:-1px;}table.falsa {border-collapse:collapse;border:0px;float: Left;}

si no sabes modificar la apariencia haz el curso css de la web. Suerte.

Intersystem · 2 May 2011, 21:34 · Solicitar retirada

Muchas gracias!
ya lo modifique a mi gusto! quedo como yo queria!

EDITO

Me encontre un solo error mas!
EN IEXPLORER NO APARECE EL MENU! :o

ME RESULTA RARISIMO PERO ASI ES NO APARECE!

Dejo html y css

HTML

<link rel="stylesheet" href="Untitled-2.css" type="text/css" /> 
<!--[if ie 6]><style>#menues ul li.nivel1 {margin-bottom:-1px} #menu ul li {width: 162px;}</style><![endif]--> 
<!--[if ie 7]><style>#menues ul li.nivel1 {margin-bottom:-3px}</style><![endif]--> 
<script type="text/javascript" src="swfobject.js"></script>
</head>

<body>
<div id="global">
<div id="contenido"></div>
<div id="menu">
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="800" height="61">
    <param name="movie" value="menu1.swf">
    <param name="quality" value="high">
	<param name="wmode" value="transparent"> 
	<embed src="menu1.swf" width="800" height="61" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent" ></embed>
  </object>
<span class="Estilo5"><img src="sep1.jpg" width="800" height="40"></span></div>
<div id="contenido2">
<div id="menues"> 
<ul> 
<li class="nivel1 primera"><a href="#" class="nivel1 Estilo1">Controladores Fiscales</a> 
<!--[if lte ie 6]><a href="#" class="nivel1ie">opción 1<table class="falsa"><tr><td><![endif]--> 
<ul class="nivel2"> 
<li class="primera"><a href="#">Registradoras Fiscales</a></li> 
<li><a href="#">Impresores Fiscales formato Ticket</a></li> 
<li><a href="#">Impresores Fiscales formato Hoja</a></li> 
<li><a href="#">Centro integral de facturación</a></li> 
<li><a href="#">Puntos de venta fiscales</a></li> 
</ul> 
<!--[if lte ie 6]></td></tr></table></a><![endif]--> 
</li> 
<li class="nivel1"><a href="#" class="nivel1">Balanzas</a> 
<!--[if lte ie 6]><a href="#" class="nivel1ie">opción 2<table class="falsa"><tr><td><![endif]--> 
<ul class="nivel2"> 
<li class="primera"><a href="#" class="nivel1">Presicion</a> 
<li><a href="#">Peso</a></li> 
<li><a href="#">Peso y Calculo</a></li> 
<li><a href="#">Con impresion de Etiquetas</a></li> 
<li><a href="#">Con impresion de Ticket</a></li> 
<li><a href="#">Con impresion de Etiquetas/Ticket</a></li> 
<li><a href="#">Con impresion de Basculas</a></li> 
<li><a href="#">Con impresion de Rieleras</a></li> 
</ul> 
<!--[if lte ie 6]></td></tr></table></a><![endif]--> 
</li> 
<li class="nivel1"><a href="#" class="nivel1">Lector de Codigo de Barras</a> 
<!--[if lte ie 6]><a href="#" class="nivel1ie">opción 3<table class="falsa"><tr><td><![endif]--> 
<ul class="nivel2"> 
<li class="primera"><a href="#">De mano</a></li> 
<li><a href="#">De mesa</a></li> 
<li><a href="#">Verificador de Precios</a></li> 
</ul> 
<!--[if lte ie 6]></td></tr></table></a><![endif]--> 
</li> 
<li class="nivel1"><a href="#" class="nivel1">Terminales Móviles</a> 
<!--[if lte ie 6]><a href="#" class="nivel1ie">opción 4<table class="falsa"><tr><td><![endif]--> 
<!--[if lte ie 6]></td></tr></table></a><![endif]--> 
</li> 
<li class="nivel1"><a href="#" class="nivel1">Impresoras</a> 
<!--[if lte ie 6]><a href="#" class="nivel1ie">opción 5<table class="falsa"><tr><td><![endif]--> 
<ul class="nivel2"> 
<li class="primera"><a href="#">De Ticket</a></li> 
<li><a href="#">De Hojas</a></li> 
<li><a href="#">De Etiquetas</a></li> 
</ul> 
<!--[if lte ie 6]></td></tr></table></a><![endif]--> 
</li> 
 
<li class="nivel1"><a href="#" class="nivel1">POS</a> 
<!--[if lte ie 6]><a href="#" class="nivel1ie">opción 5<table class="falsa"><tr><td><![endif]--> 
<ul class="nivel2"> 
<li class="primera"><a href="#">CTC</a></li> 
<li><a href="#">Teclados Programables</a></li> 
<li><a href="#">Monitores</a></li> 
<li><a href="#">Terminales Touch</a></li> 
<li><a href="#">Cajones de dinero</a></li> 
</ul> 
<!--[if lte ie 6]></td></tr></table></a><![endif]--> 
</li> 
</ul>
</div>

CSS

* { margin: 0px;padding: 0px; outline: 0;}
html, body { width: 100%;}body { background: #366;font-family: Verdana, arial, helvetica, sans-serif;}

#menues { background: #fff;font:16px Verdana, Arial, Helvetica; border:solid 0px #2C8BAB ; font-weight:bold }
#menues {
	font-size: 0.7em;
	margin-top: 35px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 5px;
	width: 220px;
	float: left;
}
#menues ul { list-style-type: None;}
#menues ul li.nivel1 { width: 215px;}
#menues ul li { text-align: left;}
#menues ul li.primera { border-top: Solid 0px #2C8BAB;}
#menues ul li a {display: Block;text-decoration: None;color:#000000;background-color: #e6ecee; border: Solid 2px #9ac1c9; padding: 8px 8px 9px;position: Relative;}
#menues ul li:hover {position: Relative;background-color: #d2dfe3;color:#000000;}
#menues ul li a:hover, 
#menues ul li:hover a.nivel1 {background-color: #d2dfe3;color: #000000;position: Relative;}
#menues ul li a.nivel1 {display: Block!important;display: None;position: Relative;}
#menues ul li ul {display: None;}
#menues ul li:hover > ul {display: Block;position: Absolute;left: 215px;top:-1px;}
#menues ul li ul li a {width: 215px;background-color: #d7dfe2;color: #000000;position: Relative;}
#menues ul li ul li a:hover {position: Relative;background-color: #b1c2c8;color: #000000;}
#menues ul li a.nivel1ie {width: 200px;padding: 8px;}
#menues ul li a.subnivel {padding-bottom: 8px;}
#menues ul li a:hover ul.nivel2, #menu ul.nivel2 li a:hover ul.nivel3, #menu ul.nivel3 li a:hover ul.nivel4 {display: Block;position: Absolute;left: 160px;top:-1px;}table.falsa {border-collapse:collapse;border:0px;float: Left;}

#col {margin: 0px;padding: 0px; outline: 0; height:100%}

ricky · 4 May 2011, 21:31 · Solicitar retirada

resultado:
[contenido no disponible]

HTML

<!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<title>menu desplegable css</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="cctw.css" type="text/css" />


</head>
<body>
<div id="menu">
<ul>

<li class="nivel1 primera" style="border-top:2px #9ac1c3 solid"><a href="#" class="nivel1">C</a>



<ul class="nivel2">
<li class="primera" style="border-top:2px #9ac1c3 solid"><a href="#">c-1</a></li>
<li><a href="#">c-2</a></li>
<li><a href="#">c-3</a></li>
<li><a href="#">c-4</a></li>
<li><a href="#">c-5</a></li>
</ul>

</li>

<li class="nivel1 primera"><a href="#" class="nivel1">L</a>

<ul class="nivel2">
<li class="primera" style="border-top:2px #9ac1c3 solid"><a href="#">l-1</a></li>
<li><a href="#">l-2</a></li>
<li><a href="#">l-3</a></li>
</ul>

</li>

<li class="nivel1 primera"><a href="#" class="nivel1">T</a>





</li>

<li class="nivel1 primera"><a href="#" class="nivel1">I</a>

<ul class="nivel2">
<li class="primera" style="border-top:2px #9ac1c3 solid"><a href="#">i-1</a></li>
<li><a href="#">i-2</a></li>
<li><a href="#">i-3</a></li>
</ul>

</li>

<li class="nivel1 primera"><a href="#" class="nivel1">p</a>

<ul class="nivel2">
<li class="primera" style="border-top:2px #9ac1c3 solid"><a href="#">p-1</a></li>
<li><a href="#">p-2</a></li>
<li><a href="#">p-3</a></li>
<li><a href="#">p-4</a></li>
<li><a href="#">p-5</a></li>
</ul>

</li>

</ul>
</div>
</body>
</html>

CSS

* { margin: 0px;padding: 0px; outline: 0;}
html, body { width: 100%;}
body { background: #336666;font-family: Verdana, arial,
helvetica, sans-serif;}

#menu { font-size: 0.7 em;margin: 20px;}
#menu ul { list-style-type: None;}
#menu ul li.nivel1 { width: 220px;}
#menu ul li { text-align: Center;}
#menu ul li.primera { border-top: Solid 1px #fff;}

#menu ul li a {display: Block;text-decoration: None;color:
#000;background-color: #e6ecee;border: Solid 2px #9ac1c9;border-top: None;
padding: 8px 8px 9px;position: Relative;font-weight:bold;font-size:12px;
text-align:left;display:block;}

#menu ul li:hover {position: Relative;background-color: #399;color: #000;}
#menu ul li a:hover,
#menu ul li:hover a.nivel1 {background-color: #D2DFE3;
color: #000;position: Relative;}
#menu ul li a.nivel1 {display: Block!important;display: None;
position: Relative;}
#menu ul li ul {display: None;}
#menu ul li:hover > ul {display: Block;position: Absolute;left: 220px;
top:-1px;}

#menu ul li ul li a {width: 220px;background-color: #E6ECEE;
color: #000;position: Relative;}
#menu ul li ul li a:hover {position: Relative;background-color: #D7DFE2;
color: #000;}

#menu ul li a.nivel1ie {width: 220px;padding: 8px;}

#menu ul li a.subnivel {padding-bottom: 8px;}
#menu ul li a:hover ul.nivel2,
#menu ul.nivel2 li a:hover ul.nivel3,
#menu ul.nivel3 li a:hover ul.nivel4 {display: Block;position: Absolute;
left: 160px;top:-1px;}
table.falsa {border-collapse:collapse;border:0px;
float: Left;}

Lo probe en ie,chrome,firefox...lo modifique de cero y el estilo cambio un poco con el tuyo pero lo deje parecido.
Saludos...

Intersystem · 5 May 2011, 13:58 · Solicitar retirada

MUCHAS GRACIAS! Genio!
De todos modos yo sigo sin poder verlo en Explorer, pero creo que es algo de mi pc entonces.
Y cuando lo miré en otra pc con explorer lo veo bien pero cuando se despliegan submenus se amontonan.

Quisiera saber si ustedes lo ven bien y soy solamente yo, o estoy fallando en algo.

http://www.intersystem-arg.site90.net/Hardware.html

Intersystem · 6 May 2011, 17:59 · Solicitar retirada

Disculpen que haga subir este tema pero sigo sin poder visualizar el menu en IExplorer.

En chrome se ve perfecto.

HTML

<div id="menues">
<ul>

<li class="nivel1 primera" style="border-top:2px #9ac1c3 solid"><a href="#" class="nivel1">Controladores Fiscales</a>



<ul class="nivel2">
<li class="primera" style="border-top:2px #9ac1c3 solid">
<li><a href="#">Registradoras Fiscales</a></li>
<li><a href="#">Impresores formato ticket</a></li>
<li><a href="#">Impresores formato hoja</a></li>
<li><a href="#">Centro integral de facturación</a></li>
<li><a href="#">Puntos de venta fiscales</a></li>
</ul>

</li>

<li class="nivel1 primera"><a href="#" class="nivel1">Balanzas</a>

<ul class="nivel2">
<li class="primera" style="border-top:2px #9ac1c3 solid"><a href="#">Presicion</a></li>
<li><a href="#">Peso</a></li>
<li><a href="#">Peso y cálculo</a></li>
<li><a href="#">Con impresion de etiquetas</a></li>
<li><a href="#">Con impresion de ticket</a></li>
<li><a href="#">Con impresion ticket/etiqueta</a></li>
<li><a href="#">Basculas</a></li>
<li><a href="#">Rieleras</a></li>
</ul>

</li>

<li class="nivel1 primera"><a href="#" class="nivel1">Terminales Móviles</a>





</li>

<li class="nivel1 primera"><a href="#" class="nivel1">Lectores de código de barras</a>

<ul class="nivel2">
<li class="primera" style="border-top:2px #9ac1c3 solid"><a href="#">De mano</a></li>
<li><a href="#">De mesa</a></li>
<li><a href="#">Verificador de precios</a></li>
</ul>

</li>

<li class="nivel1 primera"><a href="#" class="nivel1">Impresoras</a>

<ul class="nivel2">
<li class="primera" style="border-top:2px #9ac1c3 solid"><a href="#">De ticket</a></li>
<li><a href="#">De hojas</a></li>
<li><a href="#">De etiquetas</a></li>
</ul>

</li>

<li class="nivel1 primera"><a href="#" class="nivel1">Pos</a>

<ul class="nivel2">
<li class="primera" style="border-top:2px #9ac1c3 solid"><a href="#">Ctc</a></li>
<li><a href="#">Teclados programables</a></li>
<li><a href="#">Monitores</a></li>
<li><a href="#">Terminales touch</a></li>
<li><a href="#">Cajones de dinero</a></li>
</ul>

</li>
</ul>
</div>

CSS

* {
padding: 0px;
outline: 0;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
html, body { width: 100%;}
body { background: #336666;font-family: Verdana, arial,
helvetica, sans-serif;}

#menues {
font-size: 0.7 em;
width: 250px;
float: left;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 0px;
}
#menues ul { list-style-type: None;}
#menues ul li.nivel1 { width: 220px;}
#menues ul li { text-align: Center;}
#menues ul li.primera { border-top: Solid 1px #fff;}

#menues ul li a {display: Block;text-decoration: None;color:
#000;background-color: #e6ecee;border: Solid 2px #9ac1c9;border-top: None;
padding: 8px 8px 9px;position: Relative;font-weight:bold;font-size:12px;
text-align:left;display:block;}

#menues ul li:hover {position: Relative;background-color: #399;color: #000;}
#menues ul li a:hover,
#menues ul li:hover a.nivel1 {background-color: #D2DFE3;
color: #000;position: Relative;}
#menues ul li a.nivel1 {display: Block!important;display: None;
position: Relative;}
#menues ul li ul {display: None;}
#menues ul li:hover > ul {display: Block;position: Absolute;left: 220px;
top:-1px;}

#menues ul li ul li a {width: 220px;background-color: #E6ECEE;
color: #000;position: Relative;}
#menues ul li ul li a:hover {position: Relative;background-color: #D7DFE2;
color: #000;}

#menues ul li a.nivel1ie {width: 220px;padding: 8px;}

#menues ul li a.subnivel {padding-bottom: 8px;}
#menues ul li a:hover ul.nivel2,
#menues ul.nivel2 li a:hover ul.nivel3,
#menues ul.nivel3 li a:hover ul.nivel4 {display: Block;position: Absolute;
left: 160px;top:-1px;}
table.falsa {border-collapse:collapse;border:0px;
float: Left;}

#col {margin: 0px;padding: 0px; outline: 0; height:100%}