サイドバーのネストされたリストを持つWebサイトを開発しています。親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からレンダリングしています。コードからを削除すると正常に機能しますが、プロジェクトの要件を満たすには、4つの後にリストアイテムを非表示にする必要があります。そのため、デフォルトで非表示にするdivでリストアイテムを囲みました。
この問題を解決し、専門家にアドバイスを求めるために、オンラインデモページを設定しました。このページのライブデモページを見ることができます：http：//tinyurl.com/7pqo5ob
注：IEでリストアイテムとdivがどのようにレンダリングされるかを理解するために、いくつかの境界線を追加しました。他のブラウザでは正常に動作しますが、IE7ではうまく機能しません。私は多くのオプションを試しましたが、無駄でした。
お知らせ下さい。
前もって感謝します。