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" /> body,td,th {
font-size: 14px;
}
<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> <div class="top_corner"></div> <div id="main_container">
<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>
<li><a class= <li><a class="current" href="index.html" title="">INICIO
</a></li> <li><a href="lineas.html" title="">PRODUCTOS
</a> <li><a href="#">Submenu 1
</a></li> <li><a href="#">Submenu 2
</a></li> <li><a href="#">Submenu 3
</a></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>
<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> <div id="featured_positioner_desc" class="jcarousel-container"> <div id="featured_wrapper_desc" class="jcarousel-clip"> <ul id="featured_desc" class="jcarousel-list">
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.