ID not working again jQuery

Question

I have designed a drop down menu and it's working fine. Here is my code and you can also check my code here.

html

<div class="menu_option" id="hover-detail"><img src="images/menu_option_icon.jpg" alt=" " width="14" height="14" align="right" /> Menu Option



      <ul>
        <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>

Jquery

$(document).ready(function() {
    var Dropdown = {
        timer: 0,
        hide: function(callback, delay){
            console.log("hide");
            this.timer = setTimeout(function() {
                return callback.call(this, arguments);
        }, delay);
        },
        reset: function(){
            console.log("reset");
            this.timer && clearTimeout(this.timer);
        }
    };
    $('#hover-detail ul').css('display', 'none');
    $('#hover-detail').hover(function() {
        Dropdown.reset();
        $('#hover-detail ul').css({
            position: 'absolute',
            top: '20px',
            left: '0px',
            zindex: '99999'
        });
        $('#hover-detail ul').slideDown();
    }, function() {
        Dropdown.hide(function(){
            $('#hover-detail ul').slideUp()
        }, 200);
    });
    $('#hover-detail').hover(function() {
        Dropdown.reset();
    }, function(){
        Dropdown.hide(function(){
            $('#hover-detail ul').slideUp()
        }, 200);
    });
})

CSS

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

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

        }
    #hover-detail ul 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;
        }
    #hover-detail ul li a:hover
    {
        background:#CCC;
        }

The problem is when I use this drop down effect again on the page it's not working. You can check http://jsfiddle.net/avKsT/2/.

Answer 1

ID attribute must be uniqe. You couldnt use same ID for more than one html tag. You can use class selector.

i update your code. you can check this. http://jsfiddle.net/avKsT/17/

$(document).ready(function() {
    var Dropdown = {
        timer: 0,
        hide: function(callback, delay){
            console.log("hide");
            this.timer = setTimeout(function() {
                return callback.call(this, arguments);
        }, delay);
        },
        reset: function(){
            console.log("reset");
            this.timer && clearTimeout(this.timer);
        }
    };
    $('.hover-detail ul').css('display', 'none');
    $('.hover-detail').hover(function() {
        Dropdown.reset();
        $('#hover-detail ul').css({
            position: 'absolute',
            top: '20px',
            left: '0px',
            zindex: '99999'
        });
        $(this).children('ul').slideDown();
    }, function() {
        $(this).children('ul').slideUp();
    });
})​

Answer 2

Dom elements id's must be unique. When you use the dropdown again, you insert another element with the same Id "hover-details". Change the second I'd to something else or use classes as your logic selector.