estoy haciendo un menu desplegable y me gustaria que volviera a desplegar hacia la derecha, pero no se como hacerlo, no me funciona
Alguien me puede ayudar
html
<div id="menu">
<ul>
<li><a href="index.htm"><img src="images/home.gif" width="75" height="50" alt="Home Page" /></a></li>
<li><h6><a href="#">titulo1</a></h6> <ul class="subnav" id="nav">
<li><a href="1.htm" >1</a></li>
<li><a href="2.htm" >2</a></li>
<li><a href="3.htm" >3</a>
<ul>
<li><a href="3.1.htm">3.1</a></li>
<li><a href="3.2.htm">3.2</a></li>
<li><a href="3.3.htm">3.3</a></li>
</ul>
</li>
</ul>
</li>
<li><h6><a href="#">titulo 2</a></h6>
<ul class="subnav">
<li><a href="4.htm">4</a></li>
</ul>
</li>
-----------
CSS
------------
#menu ul { height:50px; color:#FFF; }
#menu ul li { float:left; padding: 0 36px 0 0; position: relative; z-index:100; }
#menu li ul.subnav { position: absolute; left: 0; top: 44px; background-color:#009ac9; margin: 0; padding:0; display: none; float: left; width: 140px; z-index:100; -moz-border-radius-bottomleft:8px; -moz-border-radius-bottomright:8px; -webkit-border-bottom-left-radius:8px; -webkit-border-bottom-right-radius:8px; border-top:none; border-bottom:1px solid #009ac9; border-left:1px solid #009ac9; border-right:1px solid #009ac9; height:auto; }
#menu li ul.subnav li { margin: 0; padding: 0; clear: both; width: 140px; z-index:150; border-top:1px solid #009ac9; }
#menu li ul.subnav li a { margin: 0; padding: 0 10px; float: left; width: 140px; z-index:155; line-height:30px; text-align:left; }
----------------
JS
----------------
$(document).ready(function(){
$("#menu ul li h6").hover(function() { //When trigger is clicked...
//Following events are applied to the subnav itself (moving subnav up and down)
$(this).parent().find("ul.subnav").slideDown('fast ').show(); //Drop down the subnav on click
$(this).parent().hover(function() {
}, function(){
$(this).parent().find("ul.subnav").slideUp('slow') ; //When the mouse hovers out of the subnav, move it back up
});
//Following events are applied to the trigger (Hover events for the trigger)
}).hover(function() {
$(this).addClass("subhover"); //On hover over, add class "subhover"
}, function(){ //On Hover Out
$(this).removeClass("subhover"); //On hover out, remove class "subhover"
});
});
