Question

我正在写一个新的wordpress主题。我添加了我的CSS html和js代码示例。问题是什么？下拉菜单不起作用。有谁可以帮助我？

css部分是：

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

html部分是：

<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部分是：

$(document).ready(function () { 

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

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


});

我能做什么工作？感谢。

Answer 1

代码实际上工作正常但你无法看到可能因为css。菜单中的文本颜色为white，并且隐藏了菜单的可见性。纠正belwo两个css规则应该可以正常工作。

更改

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

到

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

更改（如果您的页面背景不是白色，则不会出现问题）

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

到

.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

Answer 2

Selam Fatih，“Güncel”中只有一个DropdownMenü，对吗？

请参阅此代码示例：http://jsfiddle.net/7PGPE/1/ - 正常工作..究竟是什么问题？

jquery下拉不起作用？

2 个答案: