我使用的主题似乎有点损坏。
我正在尝试列出带有子项的类别,并且其中包含更多子项。
即:土 bean 和 celery 是顶级的,还有它们的子和子子。
potato
brown
block 引用>washed
celery
green
block 引用> block 引用>long
我遇到的问题是,顶层(土 bean 和 celery )一个接一个地显示,而不是 celery 显示在土 bean 最后一个子/子子之后,如上所示。这导致每个重叠文本的所有子部分。
即:
potato
celerybrowngreenwashed
block 引用> block 引用>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 */ }
输出
<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>
最佳答案
欢迎来到@dazza49r。
一定有其他干扰,因为您提供的代码有效:
http://jsfiddle.net/jasongennaro/CzcrM/
您能提供更多您遗漏的 CSS 吗?
编辑
根据新代码...问题在于高度
#sidebar ul li {
height: 35px; //REMOVE THIS
line-height: 35px;
border-bottom: 1px solid #f0f0f0;
}
关于HTML/CSS - li 和 ul 重叠问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7218684/