toggle dropdown: define starting position

Question

Hello i have a jquery dropdown:

$('div a').hover(function() {
    $('.submenu').not(this).children('li').slideUp("slow");
    $(this).children('li').slideToggle("slow");
});

right now it is collapsed, when i hover over a menu-item it slides up. How can i make the stating position to be up, and when i hover to slide down.

Also, how can only the submenus below the hovered menu-item collapse. right now when i hover over one, all submenus collapse. I know using "div a" for this is probably not very smart, but i really can't give every toggle-menu-item a different id. So is there a way to tell jquery to only collapse the children of the hovered "div a" ???

I'm a total noob!

http://jsfiddle.net/CBKZK/

Answer 1

Use like this

$('.dropdown-menu').click(function() {
    $('.dropdown-menu').not(this).children('ul').slideUp("slow");
    $(this).children('ul').slideToggle("slow");
$(".thisismobile").find("a").next().show();
});
$(".thisismobile").find("a").hover(
  function() {
    $( this ).next().slideDown();
  }, function() {
    $( this ).next().slideUp();  }
);

Demo

Edit

$('.dropdown-menu').click(function() {
    $('.dropdown-menu').not(this).children('ul').slideUp("slow");
    $(this).children('ul').slideToggle("slow");
$(".thisismobile").find("a").next().show();
});



$(".thisismobile").find("a").hover(function(){
  $( this ).next().slideDown();
});


 $(".submenu").mouseleave(function(){
  $( this ).slideUp();
});

Updated Fiddle

Answer 2

First :

$(document).ready(function(){
$(this).children('li').slideToggle("slow"); // seting initial state
$('div a').hover(function() {
   $('.submenu').not(this).children('li').slideUp("slow");
   $(this).children('li').slideToggle("slow");
});
});

I'm not quite sure to understand your second point maybe you can provide some html.