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.
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
celerybrowngreenwashed
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&ecart_category=30">Potato</a>
<ul class="children">
<li><a href="http://www.myWPurl.com/?page_id=25&ecart_category=36">Brown</a>
<ul class="children">
<li><a href="http://www.myWPurl.com/?page_id=25&ecart_category=40">Washed</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://www.myWPurl.com/?page_id=25&ecart_category=1">Celery</a>
<ul class="children">
<li><a href="http://www.myWPurl.com/?page_id=25&ecart_category=2">Green</a>
<ul class="children">
<li><a href="http://www.myWPurl.com/page_id=25&ecart_category=12">Long</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</div>
Welcome to SO @dazza49r.
There must be something else interfering, because the code you provided works:
http://jsfiddle.net/jasongennaro/CzcrM/
Can you provide more of the CSS that you left out?
EDIT
As per the new code… the issue is with the
height
Works fine now… http://jsfiddle.net/jasongennaro/CzcrM/1/