Foros del Web » Creando para Internet » CSS »

Menú Tabs con Despliegue vertical

Estas en el tema de Menú Tabs con Despliegue vertical en el foro de CSS en Foros del Web. Hi ! Los CSS me traen loco... Tengo un menú que actualmente funciona en Firefox y en Opera (pero no en nuestro querido amigo IE ...
  #1 (permalink)  
Antiguo 07/02/2008, 08:23
 
Fecha de Ingreso: enero-2008
Mensajes: 19
Antigüedad: 9 años, 11 meses
Puntos: 0
Menú Tabs con Despliegue vertical

Hi !

Los CSS me traen loco... Tengo un menú que actualmente funciona en Firefox y en Opera (pero no en nuestro querido amigo IE 6 ni IE 7 - Aunque en este ultimo por lo menos se despliega xD -).

Les paso a mostrar los CSS:
Código HTML:
div#menu {
	margin-top:32px;
}

div#menu ul {
	padding:0;
	margin:0;
	list-style:none;
	
	font-family:"Trebuchet MS", Verdana, Arial;
	font-size:12px;
	text-transform:uppercase;
	color:#666666;
	font-weight:bold;
	z-index:5000 !important;
}

div#menu li {
	float:left;
	position:relative;
	top:0;
	left:0;
	background-image:url(../images/menu_a.gif);
	background-repeat:no-repeat;
	background-position:left;
	
	width:102px;
	height:54px;
	
	text-align:center;
	line-height:54px;
}

div#menu li a{
color:#666666;
text-decoration:none;
}

div#menu li#main_menu:hover {/**/
	float:left;
	position:relative;
	top:0;
	left:0;
	background-image:url(../images/menu_b.gif);
	background-repeat:no-repeat;
	background-position:left;
	
	width:102px;
	height:54px;
	
	text-align:center;
	line-height:54px;
}
/* ----------------------------- */
/* <li>
/* ----------------------------- */

div#menu li ul {
	display:none;
	position:absolute;
	top:4.5em;
	left:0;
}

<!--[if IE 7]>
div#menu li ul {
	display:none;
	position:relative;
}
<![endif]-->

div#menu li>ul {
	top:auto;
	left:auto;
}

div#menu li:hover ul, li.over ul {
	display:block;
}

div#menu li ul li {
	width:98px;
	height:36px;/**/
	
	
	font-size:12px;
	text-transform:capitalize;
	color:#333333;/**/
	text-align:right;
	
	background-image:none;
	
	border-top:solid 1px #999999;
	
	background-color:#F3F3F3;
	
	line-height:36px;/**/
	
	opacity: .9;
	filter: alpha(opacity = 90);
}

div#menu li ul li a{
	color:#333333;/**/
	text-decoration:none;
	
	/*padding-right:7px;*/
	padding:0 7px 0 0;
	
	display:block;
	width:91px;
	height:30px;
	
	background-color:#F3F3F3;
}

div#menu li ul li a:hover{
	color:#00A0D8;
	outline:none;
}
	
/* ----------------------------- */
/* Clases
/* ----------------------------- */

div#menu .mitadLine {
	line-height:18px;
}

div#menu .activeButton {
	background-image:url(../images/menu_b.gif);
}

/* ----------------------------- */
/* 3° Nivel
/* ----------------------------- */
div#menu li ul li ul{
	display:none !important;
	position:absolute;
	top:0px;/**/
	left:8.3em;
	border-collapse:collapse;
}

div#menu li ul li ul li{
	background-image:none;
	border-top:solid 1px #999999;

	background-color:#F3F3F3;
}

div#menu li ul li ul li a{
	color:#333333;/**/
	text-decoration:none;
	display:block;
	width:91px;/**/
	height:30px;
	padding-right:7px;/**/

	background-color:#F3F3F3;
}

div#menu li ul li:hover ul, li ul li.over ul {
	display:block !important;
	outline:none;
}
Perdón la Longitud >_<... Ahora les muestro el HTML:
Código HTML:
<ul id="menu_tabs">
	<li id="main_menu">Products
		<ul id="menu_interno">
			<li style="border-top:none;"><a href="javascript:;">X-Trim</a>
				<ul id="sub_menu_3">
					<li style="border-top:none;"><a href="index.php?page_name=xtrim-xtrim">X-Trim</a></li>
					<li><a href="index.php?page_name=xtrim-retrim">Re-Trim</a></li>
				</ul>
			</li>
			<li><a href="index.php?page_name=splan-aps">S-Plan</a></li>
			<!--<li><a href="#">D-Opt</a></li>-->
			<li class="mitadLine"><a href="index.php?page_name=roll-stock-optimizer">Roll Stock Optimizer</a></li>
			<li><a href="index.php?page_name=technology">Technology</a></li>
			<li><a href="index.php?page_name=cpfr-collaborative-planning">CPFR</a></li>
		</ul>
	</li>
	<li id="main_menu">Company			
		<ul>
			<li style="border-top:none;"><a href="#">About Us</a>
				<ul id="sub_menu_3">
					<li class="mitadLine" style="border-top:none;"><a href="../pages/_greycon_about_us_directors.html">Board of Directors</a></li>
				  <li class="mitadLine"><a href="../pages/_greycon_about_us_excecutive_management_team.html">Management Team</a></li>
				  <li><a href="index.php?page_name=company-about-us-history">Brief History</a></li>
				</ul>
			</li>
			<li><a href="../pages/_greycon_company_news.html">News</a></li>
			<li><a href="greycon-feedback.php">FeedBack</a></li>
			<li><a href="greycon-contact-us.php">Contact Us</a></li>
			<li><a href="index.php?page_name=recruitment">Careers</a></li>
		</ul>
	</li>
	<li id="main_menu">Industries
	<ul>
			<li style="border-top:none;"><a href="index.php?page_name=paper-industry">Paper</a></li>
			<li><a href="index.php?page_name=film-and-plastic-industries">Film & Plastics</a></li>
			<li><a href="index.php?page_name=converting-industry">Converting</a></li>
			<li><a href="javascript:;">Other Industries</a>
				<ul id="sub_menu_3">
					<li style="border-top:none;"><a href="index.php?page_name=textile-industry">Textiles</a></li>
				  <li><a href="index.php?page_name=metals-industry">Metals</a></li>
				  <li><a href="index.php?page_name=printing-Industry">Printing</a></li>
				</ul>
			</li>
		</ul>
	<li id="main_menu"><a href="index.php?page_name=services">Services</a></li>
	<li id="main_menu">Clients</li>
	<li id="main_menu">Partners</li>
</ul>
</div> 
La cosa es (como dije antes) que en IE 6 ni se muestra... U... Me vendria bien que me dieran un mano con esto.

Desde ya, gracias!

-ByE-
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 17:16.