IE7手風琴菜單不起作用

Question

我有一個手風琴菜單，在chrome，IE8，firefox上運行非常出色，但是IE7有點困難。

您可以在此處查看所有代碼： http : //jsfiddle.net/Y5pmV/

非常感謝您的幫助，因為我的截止日期很緊！

提前謝謝了。

代碼也在這里。

的CSS

#navbar {
list-style: none;
padding: 0 0 0 0;
width: 233px;
}
#navbar li {
text-align:center;
font-weight: bold;
margin-bottom: 2px;
cursor: pointer;
list-style: circle;
height:29px;
line-height:normal;
display: table;
width: 100%;
}
#navbar ul {
list-style: none;
padding: 0 0 0 0;
display: none;
}
#navbar ul li {
font-weight: normal;
cursor: auto;
background-color: #fff;
padding: 0 0 0 7px;
line-height:normal;
}
#navbar a {
padding-top:5px;
text-decoration: none;
font-size: 19px;
}
#navbar a:hover {
}
#navbar li:first-child {
margin:2px 0 2px 0;
background:url(images/menuBG.png) 0px -90px;
}

#navbar li#menu-item-12 a, #navbar li#menu-item-13 a, #navbar li#menu-item-14 a, #navbar    li#menu-item-29 a {
color:#76a443
}

Javascript ...

$("#navbar > li").click(function () {
var child = '#' + $(this).attr('id') + ' > ul';
$(child).slideToggle();
});
$('#navbar > ul:eq(0)').show();

HTML ...

<ul id="navbar" class="menu">
<li id="menu-item-29" class="menu-item menu-item-type-custom
 menu-item-object-custom firstmenuitem"><a href="http://#" class="item"> Pests </a>

    <ul class="sub-menu">
        <li id="menu-item-22" class="menu-item menu-item-type-custom menu-item-object-custom">
<a href="#" class="item">Product 1</a>

        </li>
        <li id="menu-item-23" class="menu-item menu-item-type-custom menu-item-object-custom">
<a href="#" class="item">Product 2</a>

        </li>
        <li id="menu-item-24" class="menu-item menu-item-type-custom menu-item-object-custom">
<a href="#" class="item">product 3</a>

        </li>
        <li id="menu-item-25" class="menu-item menu-item-type-custom menu-item-object-custom">
<a href="#" class="item">Product 4</a>

        </li>
        <li id="menu-item-52" class="menu-item menu-item-type-custom menu-item-object-custom">
<a href="http://product-5" class="item">product 5</a>

        </li>
    </ul>
</li>
<li id="menu-item-51" class="menu-item menu-item-type-custom menu-item-object-custom">
<a> Products </a>

    <ul class="sub-menu">
        <li id="menu-item-22" class="menu-item menu-item-type-custom menu-item-object-custom">
<a href="#" class="item">Product 1</a>

        </li>
        <li id="menu-item-23" class="menu-item menu-item-type-custom menu-item-object-custom">
<a href="#" class="item">product 2</a>

        </li>
        <li id="menu-item-24" class="menu-item menu-item-type-custom menu-item-object-custom">
<a href="#" class="item">product 3</a>

        </li>
        <li id="menu-item-25" class="menu-item menu-item-type-custom menu-item-object-custom">
<a href="#" class="item">Product 4</a>

        </li>
        <li id="menu-item-52" class="menu-item menu-item-type-custom menu-item-object-custom">
<a href="http://product 5" class="item">product 5</a>

        </li>
    </ul>
</li>
<li id="menu-item-13" class="menu-item menu-item-type-custom menu-item-object-custom">
<a href="#" class="item"> decs 1 </a>

</li>
<li id="menu-item-14" class="menu-item menu-item-type-custom menu-item-object-custom">
<a href="#" class="item"> desc2 </a>

</li>
<li id="menu-item-15" class="menu-item menu-item-type-custom menu-item-object-custom">
<a href="#" class="item"> desc 3 </a>

</li>
<li id="menu-item-16" class="menu-item menu-item-type-custom menu-item-object-custom">
<a href="#" class="item">desc4 </a>

</li>
<li id="menu-item-17" class="menu-item menu-item-type-custom menu-item-object-custom">
<a href="#" class="item"> desc 5 </a>

</li>
<li id="menu-item-18" class="menu-item menu-item-type-custom menu-item-object-custom">
<a href="#" class="item"> desk 6 </a>

</li>
<li id="menu-item-30" class="menu-item menu-item-type-custom menu-item-object-custom">
<a href="http://#" class="item"> desk 7 </a>

</li>
<li id="menu-item-19" class="menu-item menu-item-type-custom menu-item-object-custom
lastmenuitem"><a href="#" class="item"> Links </a>

</li>
</ul>
<!-- Navbar ends here -->
</div>
<!-- Menu ends here -->

Answer 1

在此類#navbar li您的固定高度為29px ： http : //jsfiddle.net/Y5pmV/2/

您的問題在這里：

#navbar li {
  text-align:center;
  font-weight: bold;
  margin-bottom: 2px;
  cursor: pointer;
  list-style: circle;
  height:auto;   //<-------------you have fixed the height here make it auto;
  line-height:normal;
  display: table;
  width: 100%;
}

更新：

您在小提琴中有一個這樣的鏈接，試圖進行導航。

<a href="http://#"></a>

也改變這個：

<a href="#"></a>

Answer 2

嘗試這個：

$("#navbar > li").click(function () {
$("#navbar > li").css({height:'29px'});
$(this).css({height:'auto'});
var child = '#' + $(this).attr('id') + ' > ul';
$(child).slideToggle();
});
$('#navbar > ul:eq(0)').show();