hola a todos, buen dia, bueno pues tengo una duda acerca de un menu de navegación CSS que ando tratando de arreglar, el menu esta de lado izquierdo de la pagina y quiero que los submenus salgan hacia la derecha no hacia abajo, ya que tapa mis menus principales con el hover,
aqui les dejo el html:
Código HTML:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Home Studio Los Cabos</title>
<link href="Styles.css" rel="stylesheet" type="text/css">
<script src="http://cdn.jquerytools.org/1.2.5/jquery.tools.min.js"></script>
<link href="dropdown.css" media="all" rel="stylesheet" type="text/css">
<link href="default.advanced.css" media="all" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<div class="header"><a href="index.html"><img src="Images/Home-studio3_02.png" alt="Home Studio Logo" name="Insert_logo" width="482" height="97" id="Insert_logo" style="display:block; margin-left: -5px;" /></a>
<!-- end .header --></div>
<div class="sidebar1">
<ul class="dropdown dropdown-horizontal">
<li><a href="index.html">home</a></li>
<li><a href="productos.html">productos</a>
<ul><li class="submenus">muebles</li>
<li class="submenus">tapetes</li>
<li class="submenus">iluminacion</li>
<li class="submenus">vitrales</li>
<li class="submenus">persianas</li>
<li class="submenus">tapices</li>
<li class="submenus">accesorios</li>
<li class="submenus">litografias</li>
<li class="submenus">marcos</li></ul></li>
<li><a href="#">servicios</a></li>
<li><a href="#">experiencia</a></li>
<li><a href="#">contacto</a></li>
</ul>
<!-- end .sidebar1 --></div>
<div class="content">
<p> </p>
<p>promocion del mes</p>
<p><img src="Images/Home_promo_logo.png" width="852" height="641" alt="hs logo"></p>
<center><div class="content2"><img src="logosMarcas/Screen shot 2011-09-02 at 4.19.04 PM.png" width="276" height="94">
<img src="logosMarcas/Screen shot 2011-09-02 at 4.44.17 PM.png" width="276" height="94">
<img src="logosMarcas/Screen shot 2011-09-02 at 5.35.43 PM.png" width="276" height="94">
<img src="logosMarcas/Screen shot 2011-09-02 at 5.55.16 PM.png" width="276" height="94">
<img src="logosMarcas/Screen shot 2011-09-02 at 6.00.45 PM.png" width="276" height="94">
<img src="logosMarcas/Screen shot 2011-09-02 at 6.08.11 PM.png" width="276" height="94">
<img src="logosMarcas/Screen shot 2011-09-02 at 6.12.56 PM.png" width="276" height="94">
<img src="logosMarcas/Screen shot 2011-09-02 at 6.16.25 PM.png" width="276" height="94">
<img src="logosMarcas/Screen shot 2011-09-02 at 4.15.47 PM.png" width="405" height="43"></div>
<!-- end .content --></div>
<div class="footer">
<p>Footer</p>
<!-- end .footer --></div>
<!-- end .container --></div>
<script type="text/javascript" charset="utf-8">
$(function(){
$('#menu li a').click(function(event){
var elem = $(this).next();
if(elem.is('ul')){
event.preventDefault();
$('#menu ul:visible').not(elem).slideUp();
elem.slideToggle();
}
});
});
</script>
</body>
</html> el css lo dejo de comentario ya que no me deja poner tanta letra