Home/ Questions/Q 7803929
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T01:44:48+00:00

I am developing a website having a sidebar nested lists. Parent li has children

  • 0

I am developing a website having a sidebar nested lists. Parent li has children li structure. On first display 4 li (list items) are displayed and above 4 item should be hidden with a link to “Show All” option.

html codes:

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

and CSS codes are:

#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;
}

These codes are working fine in Firefox, Chrome, and IE8 but in IE7 is included in li. and lis included in are rendering out of div that is breaking the layout. If I remove the from the codes then its working fine but to meet the requirements of the project i have to hide list items after four thats why i have enclosed the list items in a div to be hidden by default.

I have setup a online demo page to resolve this problem and to get the experts advise. You can see this page live demo page: http://tinyurl.com/7pqo5ob

Note: I have added some borders to understand how list items and divs are rendering in IE. Its working fine in other browsers but not good in IE7. I have tried many options but in vain.

Please advise.

Thanks in advance.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Thank you very much for being concerned. I tried many tricks and finally i got it. Actual problem was in nested unordered list and list items structure. In the inner structure of “LI” i placed a “DIV” tag to be hidden by default. This was the point where IE 7 start breaking the layout. If i remove the “DIV” tag then it was okay but in project requirements the “DIV” should be there for hiding the “LI”s.

    After many hours of frustration, I tried to change the “DIV” to “LI” and its working fine in IE7 and in other browsers too.

    Final codes are:

    <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>
           <li class="sbSubMenu"> <!-- hidden list items -->
              <ul>
                  <li class="innerList"><a href="#" title="">Kuyumcular</a></li>
                  <li class="innerList"><a href="#" title="">Kuyumcular</a></li>
                  <li class="innerList"><a href="#" title="">Kuyumcular</a></li>
                  <li class="innerList"><a href="#" title="">Kuyumcular</a></li>
              </ul>
           </li>  <!-- // sidebar submenu -->
           <li class="Link"><a class="showAll" href="javascript:" title="" onclick="javascript:showMenu(this);">show all</a></li>
       </ul>
     </li> <!-- // main List Item --->
   </ul>

    and you can check this page live working fine with IE7.
    Link: http://www.designforce.us/demo/kktc/index.html

    Thanks

    • 0