Question

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 ?

the css part is :

.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}

The html part is:

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

JS part is:

$(document).ready(function () { 

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

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


});

What sould i do it works? Thanks.

Answer 1

The code is actually working fine but you are not able to see may be because of the css.
The text color of the menu is white in your css and the visibility of menu is hidden. Correct the belwo two css rules it should work fine.

Change

.HeaderContent #MainMenu li ul { 
    margin: 0; 
    padding: 0; 
    position: absolute;
    visibility: hidden; 
    border-top: 1px solid white
}

to

.HeaderContent #MainMenu li ul { 
    margin: 0; 
    padding: 0; 
    position: absolute;
    display: none;/*Changed to display:none becase slideDown/Up do not manipulate visiblity*/
    border-top: 1px solid white
}

Change (This will not be the issue if your page background is not white)

.HeaderContent #MainMenu li a {
    font-family:Tahoma; 
    font-weight:bold; 
    color:#ffffff; 
    font-size:11px; 
    text-decoration:none;
}

to

.HeaderContent #MainMenu li a {
    font-family:Tahoma; 
    font-weight:bold; 
    color:#0000ff;/*Changed to some other color than white */
    font-size:11px; 
    text-decoration:none;
}

Working Demo