Que tal a todos soy nuevo por aqui, tengo un problema con un menu que estaba haciendo donde utilizan css y jquery la verdad no tengo conocimiento de eso y pues ee querido aprender, alguien me podria ayudar a saber como lograr colocar submenus?? tengo el menu principal y en la seccion de diplomados se despliega un listado de 4 submenus y cada uno de ellos tiene otros submenus me gustaria que aparecieran a la derecha al sobreponer el puntero del mouse en cada uno de ellos como logro esto??? mi codigo que por cierto lo encontre en una web en un tutorial es el siguiente con algunas modificaciones diminutas que hize espero su apoyo!! me urge tener este menu terminado
<!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=iso-8859-1" />
<title>CONDHUCE, S.C.</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("ul.submenu").parent().append("<span></span>");
$("ul.menu li span").hover(function() { //Al pasar mouse se ejecuta...
//Con este codigo aplicamos el movimiento de arriva y abajo para el submenu
$(this).parent().find("ul.submenu").slideDown('fas t').show(); //Menu desplegable al hacer click
$(this).parent().hover(function() {
}, function(){
$(this).parent().find("ul.submenu").slideUp('slow' ); //Ocultamos el submenu cuando el raton sale fuera del submenu
});
}).hover(function() {
$(this).addClass("subhover"); //Agregamos la clase subhover
}, function(){ //Cunado sale el cursor, sacamos la clase
$(this).removeClass("subhover");
});
});
</script>
<style type="text/css">
body {
margin: 0;
padding: 0;
font: 12px normal Arial, Helvetica, sans-serif;
background: #FFF url(body_bg.gif) repeat-x;
background-image: url(../../CONDHUCE_Site/images/bg.png);
background-repeat: no-repeat;
background-position:center;
}
.container {
width: 800px;
margin: 0 auto;
position: relative;
}
#header {
background: url(header_bg.gif) no-repeat center top;
padding-top: 30px;
}
#header .disclaimer {
color:#666;
padding: 10px 0 7px 0;
text-align:left;
display: block;
position: absolute;
top: 0; right: 0;
}
#header .disclaimer a { color:#003399;}
ul.menu {
list-style: none;
padding: 1px;
margin: 0;
float: left;
width: 800px;
background: #222;
font-size: 1.2em;
background: url(topnav_bg.gif) repeat-x;
}
ul.menu li {
float: left;
margin: 0;
padding: 0 15px 0 0;
position: relative;
}
ul.menu li a{
padding: 10px 5px;
color: #fff;
display: block;
text-decoration: none;
float: left;
}
ul.menu li a:hover{
background: url(topnav_hover.gif) no-repeat center top;
}
ul.menu li span {
width: 17px;
height: 35px;
float: left;
background: url(subnav_btn.gif) no-repeat center top;
}
ul.menu li span.subhover {background-position: center bottom; cursor: pointer;}
ul.menu li ul.submenu {
list-style: none;
position: absolute;
left: 0; top: 35px;
background: #333;
margin: 0; padding: 0;
display: none;
float: left;
width: 170px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
border: 1px solid #111;
}
ul.menu li ul.submenu li{
margin: 0; padding: 0;
border-top: 1px solid #252525;
border-bottom: 1px solid #444;
clear: both;
width: 170px;
}
html ul.menu li ul.submenu li a {
float: left;
width: 145px;
background: #333 url(dropdown_linkbg.gif) no-repeat 10px center;
padding-left: 20px;
}
html ul.menu li ul.submenu li a:hover {
background: #222 url(dropdown_linkbg.gif) no-repeat 10px center;
}
#header img {
margin: 20px 0 10px;
}
</style>
</head>
<body>
<div class="container">
<div id="header">
<ul class="menu">
<li><a href="#">Principal</a></li>
<li>
<a href="#">Conózcanos</a>
</li>
<li>
<a href="#">Diplomados</a>
<ul class="submenu">
<li><a href="#">Tópicos Selectos de Ing. Petrolera</a></li>
<li><a href="#">Tópicos Selectos Ambientales</a></li>
<li><a href="#">Tópicos Selectos de Seguridad Industrial</a></li>
<li><a href="#">Tópicos Selectos de Administración</a></li>
</ul>
</li>
<li><a href="#">Servicios</a></li>
<li><a href="#">Nuestras Políticas</a></li>
<li><a href="#">Clientes </a></li>
<li><a href="#">Contáctenos</a></li>
</ul>
</div>
</div>
<ul>
<h3> </h3>
</ul>
</body>
</html>