On mouseout from float div hide but not from the main div

On mouseout from float div hide but not from the main div

Hi, i am baby to jquery, this is my first try.

I want when the user mouseout  from a drop menu to hide.
I have made it to a point but the menu disappears when it is out of the main div not the new one appearing.

Here is the html

  2. <div class="notifications">
  3. <button class="btn btn-primary" type="button">
  4.   Notifications <span class="badge">2</span>
  5. </button>

  7.   <div class="messages">
  8.     <a href="#" class="message">This is a message</a>
  9.     <a href="#" class="message">This is a message</a>
  10.   </div>
  11. </div>
  12. </div>
Here is the jquery
  2. $(function() {
  3.   $(".notifications .messages").hide();
  4.   $(".notifications").click(function() {

  6.     if ($(this).children(".messages").children().length > 0) {
  7.       $(this).children(".messages").fadeToggle(300);
  8.     }

  10.   });
  11. $(".notifications  .messages").mouseout(function() {

  13.    $(".notifications  .messages").hide();

  15.   });
  16. });
and the css if needed

  3. .notifications {
  4.   display:block;
  5.   background-color:white;
  6.   border-radius:50%;
  7. }

  9. .notifications .toggle {
  10.   display:block;
  11.   position:absolute;
  12.   width:100%;
  13.   height:100%;
  14. }

  16. .notifications .toggle:before,
  17. .notifications .toggle:after {
  18.   content:'.';
  19.   display:block;
  20.   position:absolute;
  21.   left:35px;
  22.   width:10px;
  23.   background-color:#bdc3c7;
  24.   color:transparent;
  25.   border-radius:5px;
  26. }


  29. .notifications .messages {
  30.   display:block;
  31.   position:absolute;
  32.   top:50px;
  33.   left:0px;
  34.   width:240px;
  35.   max-height:240px;
  36.   
  37. }

  39. .notifications .messages:before {
  40.   content:'.';
  41.   display:block;
  42.   position:absolute;

  44.   left:0px;
  45.   top:-18px;
  46.   width:0;
  47.   height:0;
  48.   color:transparent;
  49.   border:10px solid black;
  50.   border-color:transparent transparent white;
  51. }

  53. .notifications .messages .message {
  54.   display:block;
  55.   position:relative;
  56.   padding:10px;
  57.   background-color:white;
  58.   color:black;
  59.   text-decoration:none;
  60. }

  62. .notifications .messages .message + .message {
  63.   border-top:1px solid #e0e0e0;
  64. }



Any help is valuable.
I am happy learning such language , i know php and jquery is so necesery those days :)