Menú Desplegable en XHTML y CSS

jhon_fragozo · #1 (**permalink**) 25/09/2013, 22:46

Saludos!

Bueno resulta que hace días vengo trabajando sobre una web en XHTML y CSS, Vinculada también con jQuery; al comienzo esta solo tenia un menú básico, pero a petición del cliente se le tuvo que agregar un submenu y sobre esos otros submenus.

Al agregar los primeros submenus estos desplazan un slider tipo carrusel, desajustando la apariencia de la pagina. Para que vean de que les estoy hablando, aquí les dejo la web.

http://refricentersantander.com

En estos momentos, no he subido los archivos correspondientes con los cambios que les estoy realizando. Por lo tanto los submenus que irían en la parte de productos, no los podrán observar en la pagina al pasar el cursor.

Mi pregunta es: ¿como hago para que al agregar los submenus, estos no desplazasen el slider hacia abajo?.

Aquí les dejo el código en HTML y mas abajo el de la hoja de estilo (CSS)

Código HTML:

Ver original<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<style type="text/css">
body,td,th {
    font-size: 14px;
}
</style>
<script type="text/javascript" src="js/jquery.core.js"></script>
<script type="text/javascript" src="js/jquery.superfish.js"></script>
<script type="text/javascript" src="js/jquery.jcarousel.pack.js"></script>
<script type="text/javascript" src="js/jquery.easing.js"></script>
<script type="text/javascript" src="js/jquery.scripts.js"></script>
</head>
<body>
<div id="wrap">
    <div class="top_corner"></div>
    <div id="main_container">
    
        <div id="header">
            <div id="logo"><a href="index.html"><img src="images/logo.gif" alt="" title="" border="0" /></a></div>
            
            <a href="make-a-donation.html" class="make_donation"></a>
                      
            <div id="menu">
                <ul>                                                                                              
                    <li><a class= <li><a class="current"  href="index.html" title="">INICIO</a></li>
                    <li><a href="lineas.html" title="">PRODUCTOS</a>
                    <ul>
                        <li><a href="#">Submenu 1</a></li>
                        <li><a href="#">Submenu 2</a></li>
                        <li><a href="#">Submenu 3</a></li>
                    </ul></li>
                    <li><a href="marcas.html" title="">MARCAS</a></li>
                    <li><a href="servicios.html" title="">SERVICIOS</a></li>
                    <li><a href="contacto.html" title="">CONTACTO</a></li>
                </ul>
            </div>
            
        
        </div>
        
        
        <div class="middle_banner">               
           
<div class="featured_slider">
        <!-- begin: sliding featured banner -->
         <div id="featured_border" class="jcarousel-container">
            <div id="featured_wrapper" class="jcarousel-clip">
               <ul id="featured_images" class="jcarousel-list">
                  <li><img src="images/slider_photo.jpg" width="965" height="280" alt="" /></li>
                  <li><img src="images/slider_photo2.jpg" width="965" height="280" alt="" /></li>
                  <li><img src="images/slider_photo3.jpg" width="965" height="280" alt="" /></li>
                  <li><img src="images/slider_photo4.jpg" width="965" height="280" alt="" /></li>
               </ul>
            </div>
            <div id="featured_positioner_desc" class="jcarousel-container">
               <div id="featured_wrapper_desc" class="jcarousel-clip">
                  <ul id="featured_desc" class="jcarousel-list">                 
                     <li>
                        <div>

Bueno y ahora la hoja de estilo.

Código CSS:

Ver original/*----------------------menu-------------------------*/
#menu{
width:550px;
float:left;
padding:40px 0 0 0;
}
#menu ul{
list-style:none;padding:0px;margin:0px;display:block;
}
#menu ul li{
list-style:none;display:block;float:left;width:auto;padding:0px;font-size:12px;position:relative;
}
#menu ul li a{
float:left;text-decoration:none;padding:0px 10px 0 10px; margin:0px 4px 0 4px;color:#000;text-align:center; height:31px; line-height:31px;
}
#menu ul li a:hover{
background-color:#0000CC;color:#fff;
}
#menu li ul {
    display:none;
    position:relative;
}
 
#menu li:hover ul{
    display:block;
 }                      
#menu li:hover li{
    float:none;
 }      
#menu ul li a.current{
float:left;text-decoration:none;padding:0px 10px 0 10px; margin:0px 4px 0 4px;color:#fff;text-align:center; height:31px; line-height:31px; background-color:#0000CC;

Gracias por su tiempo y Colaboración.

ArturoGallegos · #2 (**permalink**) 26/09/2013, 02:01

Código CSS:

Ver original#menu li ul {
display:none;
position:absolute;
}

pzin · #3 (**permalink**) 26/09/2013, 02:43

jhon_fragozo acuérdate de usar highlight para cuando publiques código.

Lo muevo al foro de CSS.

jhon_fragozo · #4 (**permalink**) 26/09/2013, 10:58

Cita:

Iniciado por ArturoGallegos

Código CSS:

Ver original#menu li ul {
display:none;
position:absolute;
}

Men primero que todo agradecerle la ayuda.

Al colocar position:absolute; el primer submenu se monta sobre el Boton PRODUCTOS y el ultimo submenu sale detrás del slider y no se ve.

Valebis!

Cita:

Iniciado por pzin

jhon_fragozo acuérdate de usar highlight para cuando publiques código.

Lo muevo al foro de CSS.

Entendido pzin, lo tendré en cuenta la próxima ves, como ves soy nuevo en esto...

Valebis!

ArturoGallegos · #5 (**permalink**) 26/09/2013, 11:35

eso no debería pasar, colócalo en tu sitio para verlo en acción y ver si tienes algo mas que le afecte... lo de que aparece debajo del slide usa z-index para compensarlo.

jhon_fragozo · #6 (**permalink**) 30/09/2013, 13:02

Cita:

Iniciado por ArturoGallegos

eso no debería pasar, colócalo en tu sitio para verlo en acción y ver si tienes algo mas que le afecte... lo de que aparece debajo del slide usa z-index para compensarlo.

Mira te envió el index y la hoja de esilo.

http://www.mediafire.com/download/5tukmav57658fn7/Index+y+Hoja+de+Estilo.rar

valebis!

ArturoGallegos · #7 (**permalink**) 30/09/2013, 13:30

Bien tu problema se produce porque en la linea 56 aplicas float:left a <a> lo que provoca que se salga del flujo normal y por ende la lista que le sigue se mueve de lugar.... quiero pensar que usaste eso porque viste no toma la altura que le indicabas.
Si es así, elimina ese float y en su lugar usa display:block;

ya con eso en la linea 61 puedes cambiar el position a absolute como debe de ser.

lo del slide no pude verlo en tus archivos pero espero con el z-index que te había comentado lo hayas podido solucionar.

jhon_fragozo · #8 (**permalink**) 30/09/2013, 14:17

Cita:

Iniciado por ArturoGallegos

Bien tu problema se produce porque en la linea 56 aplicas float:left a <a> lo que provoca que se salga del flujo normal y por ende la lista que le sigue se mueve de lugar.... quiero pensar que usaste eso porque viste no toma la altura que le indicabas.
Si es así, elimina ese float y en su lugar usa display:block;

ya con eso en la linea 61 puedes cambiar el position a absolute como debe de ser.

lo del slide no pude verlo en tus archivos pero espero con el z-index que te había comentado lo hayas podido solucionar.

Ya quedo solucionado el problema de que el slider se moviera, gracias por la ayuda. Pero ahora viene otro; los submenus quedan debajo del slider. Como hago para solucionarlo?

Gracias de antemano.

ArturoGallegos · #9 (**permalink**) 30/09/2013, 15:19

usa el z-index adecuado, con eso lo solventaras, salvo que uses flash tendrías que especificarle wmode transparency.

no te olvides que para usar z-index el menú tiene que tener position:relative o absolute

intenta con

Código CSS:

Ver original#header{position:relative;z-index:99;}

jhon_fragozo · #10 (**permalink**) 30/09/2013, 18:27

Cita:

Iniciado por ArturoGallegos

usa el z-index adecuado, con eso lo solventaras, salvo que uses flash tendrías que especificarle wmode transparency.

no te olvides que para usar z-index el menú tiene que tener position:relative o absolute

intenta con

Código CSS:

Ver original#header{position:relative;z-index:99;}

Al usar el z-index en el header se soluciono el problema pero no se por que al intentar colocar otro submenu sobre el submenu este aprece todo de una ves y no cuando paso el cursor.

me podrías ayudar por Team Viewer por favor; llevo todo el día en ello y no he avanzado en el trabajo.