Question

Hello friend I designed a drop down menu using mouseeneter() and mouseout() in jQuery. The problem is when I mouseout() from the main menu, the drop down links slide up. I don’t know how to set conditions on it please help.
My code is

Jquery

<script>
$(document).ready(function(){
    //alert('hi');
    $('#link-detail').css('display','none');
    $('#hover-detail').mouseenter(function(){
        $('#link-detail').css({position:'absolute',top:'20px',left:'0px',zindex:'99999'});
        $('#link-detail').slideDown();
        });
        $('#hover-detail').mouseout(function(){
        $('#link-detail').slideUp();
        });

    })
</script>

html

<div class="link-detail-wrap"><div id="hover-detail">hover me</div>
<div>
  <ul id="link-detail">
    <li><a href="#">link 1</a></li>
    <li><a href="#">link 1</a></li>
    <li><a href="#">link 1</a></li>
    <li><a href="#">link 1</a></li>
    <li><a href="#">link 1</a></li>
  </ul>
</div></div>
<div>hihihih</div>

CSS

.link-detail-wrap
{
    float:left;
    width:100%;
    position:relative;
    }

ul#link-detail 
{
    margin:0;
    padding:0;
    border:solid 1px #666;
    border-bottom:none;

    }
ul#link-detail  li
{
    list-style:none;
    margin:0;
    padding:0;
    display:inline;

    }
ul#link-detail  li a
{
    text-decoration:none;
    color:#333;
    padding:2px 50px 2px 10px;
    background:#F0F0F0;
    border-bottom:1px solid #666;
    /*line-height:25px;*/
    font:12px "Trebuchet MS", Arial, Helvetica, sans-serif;
    text-transform:capitalize;
    display:block;
    }
ul#link-detail  li a:hover
{
    background:#CCC;
    }

You can also see it on http://jsfiddle.net/36CXK/

PLEASE HELP

Thanks in advance

Answer 1

use this script in your script area

<script type="text/javascript">
$(document).ready(function(){
        //alert('hi');
        $('#link-detail').css('display','none');


            $("#hover-detail").hover(
  function () {
    $('#link-detail').css({position:'absolute',top:'20px',left:'0px',zindex:'99999'});
            $('#link-detail').slideDown();
  }, 
  function () {
    // do nothing
  }
);

$(".relation").hover(
  function () {
   // do nothing
  }, 
  function () {
    $('#link-detail').slideUp();
  }
);
 })
</script>

and create on extra css class

.relation {
    position:relative;
    top:-20px;
}