clicar no texto no lugar das flexas
Ola, eu fiz um menu e estou com um problema aqui que tipo preciso clicar na flexinha pra mostrar o sub-menu eu queria q clica-se no texto, alguem pode me ajudar? segue o print e em seguida o codigo
ahh outra coisa queria q o menu fosse mais no meio tipo as letras no centro e não do lado esquerdo. obrigado pra quem ajudar!
/applications/core/interface/imageproxy/imageproxy.php?img=http://img836.imageshack.us/img836/5620/fiti.png&key=7593e11788ccc3bbace2b83d1fcf78a001acdf9681aab12e2e50dd17d8c511af" alt="fiti.png" />
<!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>Menu Drop Down con CSS & jQuery - Tutorial Desarrollado por www.micodigobeta.com.ar</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").mouseenter(function() { //Al hacer click se ejecuta...
//Con este codigo aplicamos el movimiento de arriva y abajo para el submenu
$(this).parent().find("ul.submenu").slideDown('fast').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;
}
.container {
width: 960px;
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: 0 20px;
margin: 0;
float: left;
width: 920px;
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;
}.borda { -moz-border-radius: 10px; -webkit-border-radius: 10px; }
</style>
</head>
<body>
<div class="container">
<div id="header">
<ul class="menu">
<li><a href="#">Inicio</a></li>
<li>
<a href="#">Tutoriales</a>
<ul class="submenu">
<li><a href="#">CSS</a></li>
<li><a href="#">Javascript</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">PHP</a></li>
</ul>
</li>
<li>
<a href="#" class="submenu" >Códigos</a>
<ul class="submenu">
<li><a href="#">Reloj en Flash</a></li>
<li><a href="#">Fecha con JS</a></li>
<li><a href="#">XML y AS</a></li>
<li><a href="#">RSS y PHP</a></li>
<li><a href="#">ASP a Excel</a></li>
<li><a href="#">PHP a Excel</a></li>
</ul>
</li>
<li><a href="http://micodigobeta.com.ar/?page_id=2">Sobre Nosotros</a></li>
<li><a href="#">Politica</a></li>
<li><a href="http://feeds2.feedburner.com/Micodigobeta">RSS </a></li>
<li><a href="http://micodigobeta.com.ar/?page_id=353">Contactanos</a></li>
</ul>
</div>
</div>
<ul>
</ul>
</body>
</html>Discussão (4)
Carregando comentários...