我正在开发一个具有侧边栏嵌套列表的网站。父 li 有子 li 结构。在第一次显示时，显示 4 li（列表项），上面的 4 项应隐藏，并带有指向“全部显示”选项的链接。
html代码：
<div id="sideMenuBox">
<div class="header">
<h2 class="cufon">KATEGORİLER</h2>
<a class="moreLink" href="#" title="">Tümü</a>
</div>
<div class="body"> <!-- menubox body -->
<ul id="sideMenu">
<li>
<span><img src="images/icon-1.png" alt="icon" width="32" height="19" /></span>
<a href="#" title="">Alışveriş Merkezleri</a>
<ul>
<li><a href="#" title="">Online Alışveriş Siteleri</a></li>
<li><a href="#" title="">Kuyumcular</a></li>
<li><a href="#" title="">Hediyelik Eşya</a></li>
<li><a href="#" title="">Çiçek Sektörü</a></li>
<div class="sbSubMenu" style="border:black 1px solid">
<li><a href="#" title="">Kuyumcular</a></li>
<li><a href="#" title="">Kuyumcular</a></li>
<li><a href="#" title="">Kuyumcular</a></li>
<li><a href="#" title="">Kuyumcular</a></li>
</div> <!--// sidebar submenu -->
<li><a class="showAll" href="javascript:" title="" onclick="javascript:showMenu(this);">show all</a></li>
</ul>
<br class="clearFix" />
</li>
</ul>
</div> <!-- // menubox body -->
<div class="bottom"></div>
</div> <!-- // sideMenuBox -->
和 CSS 代码是：
#sideMenu {
width:200px; height:auto;
margin:10px auto;
}
#sideMenu li{
list-style-type:none;
min-height:25px;
line-height:18px;
height:auto;
border:blue 1px solid;
}
#sideMenu hr { width:100%; height:1px; color:#e69000; background:#e69000; margin:10px auto 5px; border:0;}
#sideMenu li span { width:40px; float:left;}
#sideMenu li a{
color:#003a69;
text-decoration:none;
font-size:16px;
font-weight:bold;
margin:0; padding:0;
}
#sideMenu li li {
margin-left:50px;
display:inline-block;
line-height:20px;
border:red 1px solid;
}
#sideMenu li li a { font-size:13px; height:1px;}
#sideMenu li li a.showAll,
#sideMenu li li a.showLess{
color:006aa6;
text-decoration:underline;
font-size:12px;
font-weight:normal;
margin:10px 0;
padding-right:15px;
background:url(../images/arrow-down-blue.png) right center no-repeat;
}
#sideMenu li li a.showLess{ background:url(../images/arrow-up-blue.png) right center no-repeat;}
#sideMenu .sbSubMenu {
width:100%; height:auto;
}
这些代码在 Firefox、Chrome 和 IE8 中运行良好，但在 IE7 中包含在 li. 包含在其中的 lis 正在渲染出破坏布局的 div。如果我从代码中删除它，那么它的工作正常，但为了满足项目的要求，我必须在四个之后隐藏列表项，这就是为什么我将列表项包含在一个 div 中以默认隐藏。
我已经设置了一个在线演示页面来解决这个问题并获得专家的建议。你可以看到这个页面现场演示页面：http ://tinyurl.com/7pqo5ob
注意：我添加了一些边框来了解列表项和 div 在 IE 中是如何呈现的。它在其他浏览器中运行良好，但在 IE7 中效果不佳。我尝试了很多选择，但徒劳无功。
请指教。
提前致谢。