I am currently in the process of creating a website with nested lists in the sidebar. The parent list contains children li elements. Initially, only 4 list items are displayed, and the rest should be hidden with an option to "Show All" above them.
Here is the HTML code:
<div id="sideMenuBox">
<div class="header">
<h2 class="cufon">CATEGORIES</h2>
<a class="moreLink" href="#" title="">All</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="">Shopping Centers</a>
<ul>
<li><a href="#" title="">Online Shopping Sites</a></li>
<li><a href="#" title="">Jewelers</a></li>
<li><a href="#" title="">Gift Shops</a></li>
<li><a href="#" title="">Florists</a></li>
<div class="sbSubMenu" style="border:black 1px solid">
<li><a href="#" title="">Jewelers</a></li>
<li><a href="#" title="">Jewelers</a></li>
<li><a href="#" title="">Jewelers</a></li>
<li><a href="#" title="">Jewelers</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 -->
And here are the CSS codes:
#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;
}
The code works perfectly in Firefox, Chrome, and IE8, but in IE7, there is an issue where the div is included within li elements and lis are placed outside the div, causing layout issues. I tried removing the div tags, which fixed the problem, but I need to hide list items after the first four as per project requirements, hence why they are enclosed in a div that is initially hidden.
To address this problem and seek expert advice, I have created an online demo page. You can view the live demo here:
Note: Borders have been added to visualize how list items and divs render in IE. While it functions well in other browsers, there are rendering issues in IE7. Despite trying various solutions, the problem persists.
Please provide your insights and recommendations.
Thank you in advance.