jquery dropdown doesnt work?
<p>Im writing a new wordpress theme. i added my css html and js code samples. what is the problem ? the dropdown menus dont work. Could anyone help me ?</p>

<p>the css part is :</p>

<pre><code>.HeaderContent #MainMenuBg {float:left; margin-top:10px; width:880px; height:30px; overflow:hidden;}
.HeaderContent #MainMenu {margin:0px; padding:0px;}
.HeaderContent #MainMenu li {display:block;  float:left; list-style-type:none; margin-right:10px; margin-top:7px; padding-right:10px;}
.HeaderContent #MainMenu li a {font-family:Tahoma; font-weight:bold; color:#ffffff; font-size:11px; text-decoration:none;}
.HeaderContent #MainMenu li a:hover {text-decoration:underline; color:#FFE212;}
.HeaderContent #MainMenu li ul { margin: 0; padding: 0; position: absolute; visibility: hidden; border-top: 1px solid white}
.HeaderContent #MainMenu li ul li { float: none; display: inline} 
.HeaderContent #MainMenu li ul li a { width: auto; background: #9F1B1B}
.HeaderContent #MainMenu li ul li a:hover { background: #7F1616}
</code></pre>

<p>The html part is:</p>

<pre><code>&lt;div id="MainMenuBg"&gt;
            &lt;ul id="MainMenu"&gt;
                &lt;li&gt;&lt;a href=""&gt;Ana sayfa&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=""&gt;Güncel&lt;/a&gt;
                     &lt;ul&gt;
                        &lt;li&gt;&lt;a href="#"&gt;Son haber 1&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;Son haber 2&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;Son haber 3&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;Son haber 4&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;Son haber 5&lt;/a&gt;&lt;/li&gt;
                    &lt;/ul&gt;
                &lt;/li&gt;
                &lt;li&gt;&lt;a href=""&gt;Siyaset&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=""&gt;Ekonomi&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=""&gt;Politika&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=""&gt;Kadın&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=""&gt;Magazin&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=""&gt;Otomobil&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/div&gt;
</code></pre>

<p>JS part is: </p>

<pre><code>$(document).ready(function () { 

    $('#MainMenu li').hover(
        function () {
            //altmenuler
            $('ul', this).slideDown(100);

        }, 
        function () {
            //altmenugizle
            $('ul', this).slideUp(100);         
        }
    );


});
</code></pre>

<p>What sould i do it works? Thanks.</p>
