Menu desplegable 100% CSS

Mikmoro · #**121** (**permalink**) 16/09/2008, 02:40

A simple vista y sin ver también el html no veo exactamente qué has modificado sobre el original para que te ocurra eso. Yo diría que lo más fácil es que cojas de nuevo el menú original y vayas modificando las cosas una a una y comprobando qué ocurre en cada cambio. Lo digo entre otras cosas porque en el fragmento de html que pusiste en el otro hilo ví que habías eliminado varias cosas como los comentarios condicionales y demás, por lo que el menú no te funcionará en IE6.

Creo que partiendo del original, los cambios que quieres hacer serían sencillos, pero como ya comenté alguna otra vez, si cambias varias cosas y luego se produce un desastre, no sabes dónde está el problema, por eso es mejor ir cambiando las cosas una a una y comprobando qué ha pasado.

Si sobre el original no lo consigues, dime y te echo una mano.

Kilofafeure · #**122** (**permalink**) 16/09/2008, 03:12

Pues mira, poniendo tú código tal cual a parte de que no me lo ajusta bien, que es uno de los cambios que hice a parte de color de fondos y poco más, no me muestra el submenú bien en firefox, me los muestra por separado.

en explorer, que me hace bien el submenú (lo muestra junto) pero me tapa Mi Cuenta y en Catálogo lo muestra desplazado...

en esta imagen se deberí de ver Mi Cuenta, pero lo tapa login/logout, solo le he cambiador el color de fondo y le he quitado los bordes.

Y al cambiar:

#menu ul li.nivel1
{
float: left;
width: 162px;
margin-right: 2px;
}

por:

#menu ul li.nivel1
{
float: left;
}

me alinea bien el menú, pero Catálogo y Mi Cuenta me muetra diferente el submenú, en Catálogo lo desplaza a la derecha y en Mi cuenta me lo tapa como antes (Catálogo tb me lo mostraba desplazado y hace desaparecer Catálogo)...todo esto en explorer, en firefox bien alineado pr submenús separados:

¿sabes por qué pasa esto? Gracias!!!

Mikmoro · #**123** (**permalink**) 16/09/2008, 03:48

Como verás en el enlace, el menú que usas por sí solo funciona bien, por lo que si al incrustarlo en tu página ocurre eso, inevitablemente tiene que ser que algún otro elemento de tu css está interfiriendo con él. No puede haber otra causa si lo coges y lo pegas tal cual, tanto el html como el css.

Sólo podríamos ver qué ocurre viendo en funcionamiento tu web, si no, para mi es imposible.

Kilofafeure · #**124** (**permalink**) 16/09/2008, 03:58

Aquí va el HTML

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?=$lng['titulo_index']; ?></title>
<script language="Javascript" type="text/javascript" SRC="./js/cargarcontenedor.js"></script>
<link rel="stylesheet" type="text/css" href="css/estilo2.css"/>
</head>
<body>
    <!-- parte central -->
    <div id="container">
  
          <!-- cabecera -->
          <div id="header" >
          	<div id="flags">
            	<ul>               		
                        <li><a href="./setlang.php?lang=espanol"><img src="http://www.forosdelweb.com/images/es.gif"></a></li>
                        <li><a href="./setlang.php?lang=catalan"><img src="http://www.forosdelweb.com/images/catalonia.gif"></a></li>
                        <li><a href="#"><img src="http://www.forosdelweb.com/images/england.gif"></a></li>
                        <li><a href="#"><img src="http://www.forosdelweb.com/images/de.gif"></a></li>  
               </ul>
            </div>
            <form name="frmbusqueda2" action="" >
              <div id="buscador" style="position:relative; top: 40px; left:760px;">
              	<select name="id_sello" id="id_sello" class="tamanoselect10" size="1" onchange="cargasello()">
                    <option selected value=""><?=$lng['etiqueta']['Sellos']; ?></option>
                    <?php
                    $tablasello = mysql_query("select * FROM sellos WHERE Borrado='0' ORDER BY RefNom");
                    while ($registrosello = mysql_fetch_array($tablasello))
                    {
                        ?>
                        <option> <?php echo $registrosello['NombreSello']; ?></option>
                        <?php
                    }
                    ?>
				</select>
              </div><!-- buscador1 -->  
              <br>
              <div id="buscador" style="position:relative; top: 32px; left:760px;">
				<select name="id_estilo" id="id_estilo" class="tamanoselect10" size="1" onchange="cargaestilo()">
                    <option selected value=""><?=$lng['etiqueta']['Estilos']; ?></option>
                    <?php
                        $tablaestilo = mysql_query('select * FROM Estilo');
                        while ($registroestilo = mysql_fetch_array($tablaestilo))
                        {
                     ?>
                    <option value="<?php echo $registroestilo['id_Estilo']; ?>"> <?php echo $registroestilo['TipoEstilo'];?></option>
                    <?php
                        }
                    ?>
 				</select>
              </div><!-- buscador2 -->
            </form>            
          </div> <!-- header -->          
		  <div id="topmenu">
          	<div id="toprightmenu">
            	<div class="moduletable">
          		  <form name="frmbusqueda" action="" onsubmit="buscarDato(); return false">
           			 <label for="mod_search_searchword"><?=$lng['etiqueta']['Busqueda']; ?></label>
           			 <input id="dato" class="tamanoselect15" type="text" value="<?=$lng['etiqueta']['Busqueda']; ?>..." size="12" alt="<?=$lng['etiqueta']['Busqueda']; ?>r" maxlength="20" name="dato"/>
           		 </form>
           	 	</div>
            </div>           
          	<div id="topleftmenu">
            		<div id="menu"> <!--http://www.forosdelweb.com/f53/menu-desplegable-100-css-595007/-->
                    <ul> 
                        <li class="nivel1"><a href="#" onclick="return principal('./carrito/ver_carrito.php','mainContent');"><img src="http://www.forosdelweb.com/images/carrito.jpg" width="21" height="20"></a></li>                                              
                        <li class="nivel1"><a href="#" onclick="return principal('./inicio/inicio.php','mainContent');">Inicio</li>
                        <li class="nivel1">Catálogo               
                            <ul> 
                                <li><a class="nivel1" href="#" onclick="carganovedad();">Novedades</a></li>
                                <li><a class="nivel1" href="#" onclick="cargareposicion();">Reposiciones</a></li>
                                <li><a class="nivel1" href="#" onclick="cargaoferta();">Ofertas</a></li>
                            </ul>
                        </li>
                        <li class="nivel1">Mi Cuenta                  
                            <ul> 
                                <li><a class="nivel1" href="#" onclick="return principal('./cuenta/logout.php','mainContent');">Login/Logout</a></li>
                                <li><a class="nivel1" href="#" onclick="return principal('./cuenta/nuevaclave.php','mainContent');">Cambiar Clave</a></li>	              					
                                <li><a class="nivel1" href="#" onclick="return principal('./cuenta/crearusu.php','mainContent');">Crear Cuenta</a></li> </ul>
                        </li>   
                        <li class="nivel1">Links
                            <ul>
                                <li><a class="nivel1" href="#" onclick="return principal('./links/clubs.php','mainContent');"><?=$lng['links']['1']?></a></li>
                                <li><a class="nivel1" href="#" onclick="return principal('./links/festivales.php','mainContent');"><?=$lng['links']['2']?></a></li> <li><a class="nivel1" href="#" onclick="return principal('./links/djs.php','mainContent');"><?=$lng['links']['3']?></a></li>
                                <li><a class="nivel1" href="#" onclick="return principal('./links/amigos.php','mainContent');"><?=$lng['links']['4']?></a></li>
                                <li><a class="nivel1" href="#" onclick="return principal('./links/colaboradores.php','mainContent');"><?=$lng['links']['5']?></a></li>
                            </ul>
                        </li>
                        <li class="nivel1"><a href="www.trivialbookings.net/es/" target="_blank">Bookings</a></li>
                    </ul>
                    </div>
           	</div>
          </div>
       
          <!-- contenedor información -->
          <div id="mainContent">
          <?php include_once("./inicio/inicio.php"); ?>
          </div>
          
          <!-- pie de página -->
          <div id="footer" class="Button">
          <ul>
            <li><a href="#" onclick="return principal('./pie/envios.php','mainContent');"><?=$lng['pie']['Envios']; ?></a></li>            
            <li><a href="#" onclick="return principal('./pie/confidencialidad.php','mainContent');"><?=$lng['pie']['Confi']; ?></a></li>            
            <li><a href="#" onclick="return principal('./pie/condiciones.php','mainContent');"><?=$lng['pie']['Condi']; ?></a></li>            
            <li><a href="#" onclick="return principal('./pie/confidencialidad.php','mainContent');"><?=$lng['pie']['Contact']; ?></a></li>            
          </ul>
          </div>      
    </div>
</body>
</html>

Kilofafeure · #**125** (**permalink**) 16/09/2008, 03:59

Aquí va el CSS
[HTML]
@charset "utf-8";

* {
margin:0;
outline-color:-moz-use-text-color;
outline-style:none;
outline-width:0;
padding:0;
}
#menu {
/*
font-size:0.9em;
margin:20px auto;
text-align:center;
*/
height:16px;
margin:0 20px 0 0;
padding:10px 0;
text-align:left;
}
#menu ul {
list-style-type: none;
}
#menu ul li.nivel1 {
float:left;
}
#menu ul li a {
background-color: transparent;
color: #FFFFFF;
display:block;
padding:0px;
position:relative;
text-decoration:none;
}
#menu ul li:hover {
position:relative;
}
#menu ul li a:hover, #menu ul li:hover a.nivel1 {
background-color: #111111;
color: #FFFFFF;
position:relative;
}
#menu ul li a.nivel1 {
display:block !important;
position:relative;
}
#menu ul li ul {
display:none;
}
#menu ul li a:hover ul, #menu ul li:hover ul {
display:block;
left:0;
position:absolute;
width: 150px;
}
#menu ul li ul li a {
border-top-color:#000000;
padding:0px 0px;
}
#menu ul li ul li a:hover {
border-top-color:#000000;
position:relative;
}

#mainContent {
padding: 3px 0 0 0;
margin: 0;
color:#000000;
background:#DDFFDD;
font-family: Arial,Helvetica,sans-serif;
font-size: 12pt;
}
#maincontent h1, #maincontent .componentheading {
font-family:Arial,Helvetica,sans-serif;
font-size:16pt;
height:16pt;
margin:0 0 10px;
padding:3px 0 0;
}
#maincontent h2, #maincontent .contentheading {
font-family:Arial,Helvetica,sans-serif;
font-size:16pt;
margin:0;
padding:3px 0 0;
}
#maincontent h3 {
font-size:14pt;
margin:0;
padding:3px 0 0;
}
#maincontent h4 {
font-size:12pt;
margin:0;
padding:3px 0 0;
}
.post-body div
{
text-align:center;
}
.tamanoselect10
{
width:9.9em;
padding:0px 0px 4px 0px;
}
.tamanoselect15
{
width:12.9em;
padding:0px 0px 4px 0px;
}
body
{
color: #FFFFFF;
background-color: #000000;
background-image: url(../images/fondo.gif);
font-family: Verdana,Helvetica,sans-serif;
line-height: 1.3em;
margin: 0;
padding: 0;
font-size: 10pt;
}
#container {
width: 920px;
background: #FFFFFF;
margin: 0 auto; /* los márgenes automáticos (conjuntamente con un ancho) centran la página */
border: 1px solid #000000;
text-align: left; /* esto anula text-align: center en el elemento body. */
}
#header {
background-image: url(../images/header-fondo2.gif);
height:130px;
width: 100%;
margin: 0;
padding: 0;
background-color: #ffffff;
color: #000000;
}
#flags {
position:relative; top: 5px; left: 770px;
padding:2px 0px 2px 15px;
text-align:left;
width:210px;
}
#flags ul {
margin:0;
padding:0;
}
#flags li {
display:inline;
margin:0;
padding:0;
}
#buscador {
position: relative;
left: 750px;
}
#topleftmenu
{
background-image:url(../images/topbar-left.gif);
background-position:left center;
background-repeat:no-repeat;
padding-left: 117px;
/*
height:16px;
margin:0 20px 0 0;
padding:10px 0;
text-align:right;
*/
}

#toprightmenu
{
border-left:2px solid #FFFFFF;
float:right;
font-size:10pt;
font-weight:bold;
margin:7px 0 5px 20px;
padding:0 10px 0 20px;
}
#topmenu {
background-image:url(../images/topbar-fondo.gif);
background-repeat:repeat-x;
font-family:Arial,Helvetica,sans-serif;
height:36px;
margin:0;
padding:0;
}
#topmenu .moduletable
{
display:inline;
}
#topmenu ul {
display: inline;
}
#topmenu ul li {
margin: 0;
padding: 0 0 0 20px;
display: inline;
font-size: 11pt;
font-weight: bold;
}
#topmenu form {
display: inline;
padding: 0;
margin: 0;
}
#topmenu a {
color:#FFFFFF;
text-decoration:none;
}
img {
border: 0;
}
#footer {
background-image: url(../images/footer-fondo.gif);
background-repeat: repeat-x;
background-color: #000000;
color: #FFFFFF;
font-family: Verdana,Helvetica,sans-serif;
font-size: 6px;
height: 20px;
text-align:center;
padding: 2px 10px 0 10px;
}
#footer ul {
display: inline;
}
#footer ul li {
margin: 0;
padding: 0 0 0 20px;
display: inline;
}
#footer form {
display: inline;
padding: 0;
margin: 0;
}
#footer p {
margin: 0; /* el ajuste en cero de los márgenes del primer elemento del pie evitará que puedan contraerse los márgenes (un espacio entre divs) */
padding: 10px 0; /* el relleno de este elemento creará espacio, de la misma forma que lo haría el margen, sin el problema de la contracción de márgenes */
}
#footer a {
color:#FFFFFF
}
a:link {
text-decoration:none;
color: inherit;
}
dl {
margin: 0 0 5px 0;
}
dt {
font-weight: bold;
}
dd {
margin: 0 0 0 0;
}
ul {
padding: 0 0 0 20px;
margin: 0 0 5px 0;
}
fieldset {
border: 1px solid #dddddd;
margin: 0 0 7px 0;
padding: 10px 10px;
}
p {
width: 100%;
margin: 0 0 5px 0;
}
.Button{
margin: 0;
padding: 0;
border: 0;
background-color: transparent;
}
[HTML]

Mikmoro · #**126** (**permalink**) 16/09/2008, 04:18

Pues perdóname pero ahora sí que definitivamente no te entiendo: en el menú usas javascript, incrustas imágenes, eliminas las clases que yo uso para que todo funcione, eliminas los comentarios condicionales para IE6... la verdad, ¿en qué se parece este menú que quieres hacer con mis ejemplos?

¿Y dices que sólo has cambiado el color de fondo y nada más? Me has dejado perplejo, la verdad.

Kilofafeure · #**127** (**permalink**) 16/09/2008, 04:50

Cita:

Iniciado por Mikmoro

Pues perdóname pero ahora sí que definitivamente no te entiendo: en el menú usas javascript, incrustas imágenes, eliminas las clases que yo uso para que todo funcione, eliminas los comentarios condicionales para IE6... la verdad, ¿en qué se parece este menú que quieres hacer con mis ejemplos?

¿Y dices que sólo has cambiado el color de fondo y nada más? Me has dejado perplejo, la verdad.

El javascript que utilizo en el menu es para cargar cosas en el container, no utilizo para nada javascript en el menu, es decir utilizo ajax para cargar lo que necesito donde lo necesito, no he leido que no se puedan utilizar, si no es así 1ª noticia y lo siento. Piensa que el menú siempre esta visible ya que está en el header, si has mirado el html de arriba (que está todo) lo habrás visto, que lo único que cambia en la pagina es el contenedor.

Las unica imagen que utilizo en el menu es para un carrito, tampoco he leido que no se puedan poner, al fin y al cabo me la alinea bien y no tiene ni submenu ni nada d nada, es un link normal y corriente, en vez de texto imagen.

Los comentarios condicionales no me aparecen cuando cargo la pagina con el css, además estoy utilizando explorer 7, no 6...pero no estaria de mas tenerlos
http://www.araudi.net/forosdelweb/css/menu.css
He vuelto a mirarlo y no aparecen, y si cargo el menu con firebug tampoco aparecen...

¿Y me podrias decir que clases me he cargado por favor?, he cortado y pegado tal cual del link

Aquí solo tienes el codigo del menu:

Código HTML:

 <div id="topleftmenu">
            		<div id="menu"> <!--http://www.forosdelweb.com/f53/menu-desplegable-100-css-595007/-->
                    <ul> 
                        <li class="nivel1"><a href="#" onclick="return principal('./carrito/ver_carrito.php','mainContent');"><img src="http://www.forosdelweb.com/images/carrito.jpg" width="21" height="20"></a></li>                                              
                        <li class="nivel1"><a href="#" onclick="return principal('./inicio/inicio.php','mainContent');">Inicio</li>
                        <li class="nivel1">Catálogo               
                            <ul> 
                                <li><a class="nivel1" href="#" onclick="carganovedad();">Novedades</a></li>
                                <li><a class="nivel1" href="#" onclick="cargareposicion();">Reposiciones</a></li>
                                <li><a class="nivel1" href="#" onclick="cargaoferta();">Ofertas</a></li>
                            </ul>
                        </li>
                        <li class="nivel1">Mi Cuenta                  
                            <ul> 
                                <li><a class="nivel1" href="#" onclick="return principal('./cuenta/logout.php','mainContent');">Login/Logout</a></li>
                                <li><a class="nivel1" href="#" onclick="return principal('./cuenta/nuevaclave.php','mainContent');">Cambiar Clave</a></li>	              					
                                <li><a class="nivel1" href="#" onclick="return principal('./cuenta/crearusu.php','mainContent');">Crear Cuenta</a></li> </ul>
                        </li>   
                        <li class="nivel1">Links
                            <ul>
                                <li><a class="nivel1" href="#" onclick="return principal('./links/clubs.php','mainContent');"><?=$lng['links']['1']?></a></li>
                                <li><a class="nivel1" href="#" onclick="return principal('./links/festivales.php','mainContent');"><?=$lng['links']['2']?></a></li> <li><a class="nivel1" href="#" onclick="return principal('./links/djs.php','mainContent');"><?=$lng['links']['3']?></a></li>
                                <li><a class="nivel1" href="#" onclick="return principal('./links/amigos.php','mainContent');"><?=$lng['links']['4']?></a></li>
                                <li><a class="nivel1" href="#" onclick="return principal('./links/colaboradores.php','mainContent');"><?=$lng['links']['5']?></a></li>
                            </ul>
                        </li>
                        <li class="nivel1"><a href="www.trivialbookings.net/es/" target="_blank">Bookings</a></li>
                    </ul>
                    </div>
           	</div>
          </div>

Espero que me puedas decir si puedo utilizar javascript o no en los links, si puedo poner o no imagenes y si puedes chequear los links ya que lo he mirado con explorer y firefox y de ninguna manera me aparecen los condicionales o a ver si me puedes decir que estoy haciendo mal para poder verlo correctamente...muchas gracias!

Mikmoro · #**128** (**permalink**) 16/09/2008, 05:31

Cita:

Iniciado por Kilofafeure

El javascript que utilizo en el menu es para cargar cosas en el container, no utilizo para nada javascript en el menu, es decir utilizo ajax para cargar lo que necesito donde lo necesito, no he leido que no se puedan utilizar, si no es así 1ª noticia y lo siento.

No, veamos, te he contestado un poco precipitado.
El javascript lo puedes usar siempre que quieras, y más si es ajax para cargar otra cosa en otra parte. No me he fijado y pensaba que usabas JS para desplegarlo.

Cita:

Iniciado por Kilofafeure

Las unica imagen que utilizo en el menu es para un carrito, tampoco he leido que no se puedan poner, al fin y al cabo me la alinea bien y no tiene ni submenu ni nada d nada, es un link normal y corriente, en vez de texto imagen.

Por supuesto que puedes usar imágenes, pero te podrían producir un efecto indeseado por sus tamaños, display, etc.

Cita:

Iniciado por Kilofafeure

Los comentarios condicionales no me aparecen cuando cargo la pagina con el css, además estoy utilizando explorer 7, no 6...pero no estaria de mas tenerlos

Los comentarios condicionales obviamente no están en la css, sino en el html. Míralo bien y verás que están ahí

Cita:

Iniciado por Kilofafeure

¿Y me podrias decir que clases me he cargado por favor?, he cortado y pegado tal cual del link

Perdón, no has eliminado, has añadido.
Los li "<li class="nivel1">" sólo deben ser lo que tengan algo que desplegar dentro, no todos. Y has añadido esa clase también a los enlaces

(<li><a class="nivel1" href="#" onclick...)

así, que creo que no, no has copiado y pegado tal cuál (a no ser que estemos hablando de diferente menú).

Es bastante probable que el problema esté justamente en esa clase. Revisa que sólo los elementos de primer nivel que tengan algo que desplegar dentro lleven esa clase.

Si has copiado y pegado tal cuál dime de qué número de menú estás hablando, para comprobarlo.

Kilofafeure · #**129** (**permalink**) 16/09/2008, 07:03

Cita:

Iniciado por Mikmoro

Los comentarios condicionales obviamente no están en la css, sino en el html. Míralo bien y verás que están ahí

Cierto es, con firebug no sale, dándole a ver código fuente aparecen...

Cita:

Iniciado por Mikmoro

Perdón, no has eliminado, has añadido.
Los li "<li class="nivel1">" sólo deben ser lo que tengan algo que desplegar dentro, no todos. Y has añadido esa clase también a los enlaces
(<li><a class="nivel1" href="#" onclick...)
así, que creo que no, no has copiado y pegado tal cuál (a no ser que estemos hablando de diferente menú).

Cierto también, iba mirando código y adaptando el mio y lo hice mal, al arreglar esto en firefox ya se me muestra como todo un bloque. Muchas Gracias!! sin embargo en explorer me da los mismos errores, investigaré un poco más...

Pero tengo otra pregunta, como puedo hacer para que me quite este espacio de fondo de color dentro del submenú, me aparece como tabulado y estoy tocando propiedades align-text pero no consigo que me lo mueva, también he provado con el ancho del submenú pero entonces los que son largos y tienen 2 palabras me los divide en 2 filas...muchas gracias por enésima vez!

Mikmoro · #**130** (**permalink**) 16/09/2008, 07:52

El alineado al centro de los elementos del menú se encuentra aquí:

#menu { text-align: center;

con quitar ese, todo se va a la izquierda.

balibrea · #**131** (**permalink**) 03/10/2008, 07:47

alguien puede decirme porque se me ve con letras en vez de como a vosotros?

Se me ve así; http://www.mariabalibrea.es/desplegable.htm

David · #**132** (**permalink**) 03/10/2008, 08:52

Es porque no tienes cargado el CSS, debes tenerlo en la carpeta css con nombre menu.css

Hiruma-Sama · #**133** (**permalink**) 03/10/2008, 14:39

realmente exelente, me a servido de maravilla y aprendi algunas cosas muy interesantes ^^

Mikmoro · #**134** (**permalink**) 03/10/2008, 16:50

Cita:

Iniciado por David el Grande

Es porque no tienes cargado el CSS, debes tenerlo en la carpeta css con nombre menu.css

Efectivamente, gracias, David.

balibrea: si te fijas donde descargaste el html, hay un enlace al archivo css, para que puedas descargarlo y ponerlo en tu servidor.

Mikmoro · #**135** (**permalink**) 03/10/2008, 16:51

Cita:

Iniciado por Hiruma-Sama

realmente exelente, me a servido de maravilla y aprendi algunas cosas muy interesantes ^^

Me alegro de que te haya gustado y servido de algo

balibrea · #**136** (**permalink**) 19/10/2008, 09:32

Cita:

Iniciado por David el Grande

Es porque no tienes cargado el CSS, debes tenerlo en la carpeta css con nombre menu.css

MUCHISIMAS GRACIAS DAVID!!!! Meha servido de ayuda perfectamente. Te lo agradezco de verdad.

kahlito · #**137** (**permalink**) 19/10/2008, 10:05

Excelente aportación Mikmoro

Gracias por compartir

Null_ · #**138** (**permalink**) 19/10/2008, 10:54

excelente! :D!!!

dksiul2811 · #**139** (**permalink**) 20/10/2008, 15:26

men he copiado el cod.fuente de la pagina y el css y no me sale ningun menu solo me aparece un menu vertical con puntos y nada mas, espero me entiendas y saber que es lo que estoy haciendo mal.

Mikmoro · #**140** (**permalink**) 20/10/2008, 15:34

Es difícl saber con tan escasa explicación, pero date cuenta de que la css en estos menús siempre está en una carpeta llamada "css", por eso en la cabecera encuentras esta llamada a la hoja de estilo:

<link rel="stylesheet" href="css/menu.css" type="text/css" />

Es decir: o quitas el css/ de ese nombre o creas una carpeta ahí mismo llamada css y metes ahí la hoja de estilo.

A ver si es eso.

nfo · #**141** (**permalink**) 20/10/2008, 15:38

Que buen aporte.... me va a venir de perlas! gracias

balibrea · #**142** (**permalink**) 21/10/2008, 15:58

[bueno antte todo darte las gracia por compartir todo lo que sabes, eres una makina, pero he utilizado tu desplegable que es magnifico. y tengo un problema que desde algunos ordenadores no se desplega, no se porque. sale opcion 1 opcion 2 opcion3 opcion4 y enciam no se desplega, muchas gracias por todo

Con que tiene que ver eso?

Mikmoro · #**143** (**permalink**) 21/10/2008, 16:08

Hola, balibrea.

¿En que ordenadores? yo lo he comprobado en todos estos navegadores

- Firefox 2 y 3
- IE 6 y 7
- Opera 9.50
- Safari 3.1 Windows
- Konkeror (Linux)
- Firefox 2 y 3 (Linux)

y funciona en todos, todos en PC`s con Windows y Linux.

Dime en qué ordenadores y con qué navegadores, a ver si se puede averiguar algo.

balibrea · #**144** (**permalink**) 23/10/2008, 01:34

Cita:

Iniciado por Mikmoro

Hola, balibrea.

¿En que ordenadores? yo lo he comprobado en todos estos navegadores

- Firefox 2 y 3
- IE 6 y 7
- Opera 9.50
- Safari 3.1 Windows
- Konkeror (Linux)
- Firefox 2 y 3 (Linux)

y funciona en todos, todos en PC`s con Windows y Linux.

Dime en qué ordenadores y con qué navegadores, a ver si se puede averiguar algo.

Hola! muchas gracias por atenderme te lo agradezco de verdad, siempre tan genial.
Tengo internet explorer 6 en concreto este:(lo siento por no poner enlace directo no me lo permite todavía)

www.todoaunclic.com/Dibujocualidadesdeexplorer.bmp

y se me ve así :
www.todoaunclic.com/Dibujo.bmp
...y no se despliegan

este es el enlace www.mariabalibrea.es

muchas gracias por todo, te admiro, eres un genio y enciam compartes

este es mi codigo 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> Aritista Maria Balibrea Melero CSS</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="css/menu.css" type="text/css" />
</head>
<body background="imagenes/fotomaria.jpg">
<table border="0" width="100%">
<tr>
<td width="100%">
<p align="center"><b><font face="Comic Sans MS" color="#ffffff" size="6"><i>Maria
Balibrea Melero</i></font></b></p>
</td>
</tr>
</table>

<div id="menu" style="width: 674; height: 361">
<ul>
<li class="nivel1"><a href="http://www.forosdelweb.com" class="nivel1">Trayectoria
de pinturas</a>
<ul>
<li><a href="http://www.mariabalibrea.es/Pinturatrayectoria/anterioresal2000/index.html">Cuadros
anteriores al 2000</a></li>
<li><a href="http://www.mariabalibrea.es/Pinturatrayectoria/cuadros2000-2003/index.html">Cuadros
período 2000-2003</a></li>
<li><a href="http://www.mariabalibrea.es/Pinturatrayectoria/cuadros2003-2006/index.html">Cuadros
período 2003-2006</a></li>
</ul>

</li>
<li class="nivel1"><a href="#" class="nivel1">Libros ilustrados</a> 
<ul>
<li><a href="#">Fábulas de Tomás de Iriarte</a></li>
<li><a href="http://www.google.es">Pandora de Antonio Balibrea</a></li>
</ul>

</li>
<li class="nivel1"><a href="#" class="nivel1">Pinturas</a> 
<ul>
<li><a href="#">Pinturas 2008</a></li>
</ul>

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

<ul>
<li><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>
<li><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>
<div id="menu0" style="width: 674; height: 361">
<ul>
<li class="nivel1">

</li>
</ul>
</div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<table border="0" width="100%">
<tr>
<td width="100%" bordercolor="#FFFFFF"><b>Fotografía; <i>Ana Rosa Paños Martínez</i></b></td>
</tr>
</table>
<p> </p>
</body>
</html>

se me habia olvidado este es mi codigo css, bueno que es el tuyo...

* { margin: 0px;
padding: 0px; outline: 0;
}
html, body { width: 100%;}

body {font-family: Verdana, Arial, Helvetica, sans-serif;
}
#menu { text-align: center;
font-size: 0.7em;
width: 820px;
margin: 20px auto;
}
#menu ul { list-style-type: none;}
#menu ul li.nivel1 { float: left;
width: 162px;
margin-right: 2px;
}
#menu ul li a {display: block;
text-decoration: none;
color: #fff;
background-color: #000;
border: solid 1px #fff;
padding: 8px;
position: relative;
}
#menu ul li:hover {position: relative;
}
#menu ul li a:hover, #menu ul li:hover a.nivel1 {background-color: ;
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 a:hover ul, #menu ul li:hover ul {display: block;
position: absolute;left: 0px;
}
#menu ul li ul li a {width: 160px;
padding: 6px 0px 8px 0px;
border-top-color: #000;
}
#menu ul li ul li a:hover {border-top-color: #000;
position: relative;
}
table.falsa {border-collapse:collapse;
border:0px;
float: left;
position: relative;
}

sin embargo tu codigo tal cual si que se ve bien en el mismo navegador, algo debo de haber hemodificado que lo he estropeado

Mikmoro · #**145** (**permalink**) 23/10/2008, 10:54

Se trata de una pequeña tontería: en este selector

#menu ul li a:hover, #menu ul li:hover a.nivel1 {
background-color: ;
color: #000;
position: relative;
}

Has eliminado el color de fondo, y no debes hacerlo porque en ese caso no se ve en IE6. El original era:

#menu ul li a:hover, #menu ul li:hover a.nivel1 {
background-color: #6CC;
color: #000;
position: relative;

Cámbialo por el color que tú quieras, pero no lo elimines.

balibrea · #**146** (**permalink**) 23/10/2008, 15:03

Cita:

Iniciado por Mikmoro

Se trata de una pequeña tontería: en este selector

#menu ul li a:hover, #menu ul li:hover a.nivel1 {
background-color: ;
color: #000;
position: relative;
}

Has eliminado el color de fondo, y no debes hacerlo porque en ese caso no se ve en IE6. El original era:

#menu ul li a:hover, #menu ul li:hover a.nivel1 {
background-color: #6CC;
color: #000;
position: relative;

Cámbialo por el color que tú quieras, pero no lo elimines.

Muchas gracias, con lo que me has dicho he conseguido arreglarlo, es un honor poder contar con tu ayuda

Mikmoro · #**147** (**permalink**) 23/10/2008, 15:34

De nada, es un placer.

Saludos.

Null_ · #**148** (**permalink**) 23/10/2008, 21:39

mikmoro te ganaste un articulo en mi sitio web :P
http://codigodemaquina.110mb.com/CSS...esplegable.php

Suerte :D

Mikmoro · #**149** (**permalink**) 24/10/2008, 01:21

Estupendo

Saludos

balibrea · #**150** (**permalink**) 24/10/2008, 04:54

Cita:

Iniciado por Mikmoro

De nada, es un placer.

Saludos.

Lo siento, otra vez no se ven. pero ahora es con el explorer 7.0 con el que ni siquiera aparecen ( con el 6.0 se ven de lujo. ¿Que puede ser?

ya he conseuido que se vea pero para eso he tenido que quitar el titulo de la pagina que lo tenia así ...

<table border="0" width="100%">
<tr>
<td width="100%">
<p align="center"><b><font face="Comic Sans MS" color="#ffffff" size="6"><i>
Maria Balibrea Melero</i></font></b></p>
</td>
</tr>
</table>

¿puedo ponerle esto de alguna manera y que se sigan viendo los desplegables en el
ie7? muchas gracias de antemano, eres un genio?