Home/ Questions/Q 8772035
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T17:56:26+00:00

i want to create a simple dropdown menu with div but i have this

  • 0

i want to create a simple dropdown menu with div but i have this problem:
when goes over my button div show pretty good but when mouse goes out from my link field (in this case show/hide text) my div goes to hide . how can i change my hide area button ?
because in my files i cant select links in dropdown div.

HTML code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Papermashup.com | Sliding Div</title>
<script src="jquery.js" type="text/javascript"></script>
<script src="dropdown/drop.js" type="text/javascript"></script>
<link type="text/css" href="dropdown/drop.css" rel="stylesheet"/>

</head>

<body>
 <a href="#" class="show_hide">Show/hide</a><br />
    <div class="slidingDiv" style="width:103px;height:60px;">
        <img alt="" height="80" src="images/dropdown.png" width="103">
    </div>
</body>
</html>

CSS code:

.show_hide {
    display:none;
}

JavaScript code:

$(document).ready(function(){


    $(".slidingDiv").hide();
    $(".show_hide").show();

$('.show_hide').mouseover(function(){
    $(".slidingDiv").slideToggle();
});
$('.show_hide').mouseout(function(){
    $(".slidingDiv").slideToggle();
});

});
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You need to wrap the link and the div into the same container,then bind the event there.

    <div class="wrapper">
    <a href="#" class="show_hide">Show/hide</a><br />
    <div class="slidingDiv" style="width:103px;height:60px;">
        <img alt="" height="80" src="images/dropdown.png" width="103">
    </div>
</div>

    Then,rather then biding the event to show_hide, bind it to the class ‘wrapper’.

    • 0