HTML / CSS – li & ul overlapping issue

I’m using a theme which seems a tad broken.
I am trying to list categories with subs and within those are more subs.

ie: potato and celery are top level, with their subs and sub-subs.

Read More

potato

brown

washed

celery

green

long

The issue I’m having is, the top levels (potato and celery) are displayed one under the other, rather celery displayed after potatos last sub/sub-sub as shown above. This leads to all the subs of each, overlapping text.

ie:

potato
celerybrown

greenwashed

long

CSS

#sidebar ul li {
    height: 35px;
    line-height: 35px;
    border-bottom: 1px solid #f0f0f0;
}
    ul.ecart_categories { /* category list container */ }
    ul.ecart_categories li { /* category listing containers */ }
    ul.ecart_categories li a { /* category link default styles */ }
    ul.ecart_categories li a:hover { /* category link hover styles */ }
    ul.ecart_categories li span { /* categpry product count styles */ }
    ul.ecart_categories li.current { /* currently viewed category container */ }
    ul.ecart_categories li.current a { /* currently viewed category link style */ }
    ul.ecart_categories li.current a:hover { /* currently viewed category link hover style */ }
    ul.ecart_categories li ul.children { padding-left: 10px;/* sub-category list container */ }
    ul.ecart_categories li ul.children li { padding-left: 10px;/* sub-category listing container */ }
    ul.ecart_categories li ul.active { /* active sub-category container */ }

OUTPUT

<div class="one_fourth" id="sidebar">
    <li id="ecartcategorieswidget-3" class="widget-1 widget-first widget sbg_widget Shop widget_ecartcategorieswidget">
    <h2 class="widgettitle sbg_title">Categories</h2>
    <ul class="ecart_categories">
        <li><a href="http://www.myWPurl.com/?page_id=25&amp;ecart_category=30">Potato</a>
            <ul class="children">
                <li><a href="http://www.myWPurl.com/?page_id=25&amp;ecart_category=36">Brown</a>
                    <ul class="children">
                        <li><a href="http://www.myWPurl.com/?page_id=25&amp;ecart_category=40">Washed</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="http://www.myWPurl.com/?page_id=25&amp;ecart_category=1">Celery</a>
            <ul class="children">
                <li><a href="http://www.myWPurl.com/?page_id=25&amp;ecart_category=2">Green</a>
                    <ul class="children">
                        <li><a href="http://www.myWPurl.com/page_id=25&amp;ecart_category=12">Long</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
    </li>
</div>

Related posts

Leave a Reply

1 comment