ID not working again jQuery
<p>I have designed a drop down menu and it's working fine. Here is my code and you can also check my code <a href="http://jsfiddle.net/avKsT/1/" rel="nofollow">here</a>.</p>

<p><strong>html</strong></p>

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



      &lt;ul&gt;
        &lt;li&gt;&lt;a href="#"&gt;link 1&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;link 1&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;link 1&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;link 1&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;link 1&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;

                      &lt;/div&gt;
</code></pre>

<p><strong>Jquery</strong></p>

<pre><code>$(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 &amp;&amp; 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);
    });
})
</code></pre>

<p><strong>CSS</strong></p>

<pre><code>#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;
        }
</code></pre>

<p>The problem is when I use this drop down effect again on the page it's not working. You can check <a href="http://jsfiddle.net/avKsT/2/" rel="nofollow">http://jsfiddle.net/avKsT/2/</a>. </p>
