Question

请帮我解决这个问题 http://jsfiddle.net/3ESs3/

<div>
<ul style="display: inline; list-style-type: none;">
<li style="float: left; margin-left: 20px;"><a title="Wszystkie produkty marki Adidas" href="#"><img title="Adidas" src="#" alt="Adidas" height="100" width="100" /></a></li>
<li style="float: left; margin-left: 20px;"><strong>Popular serie</strong></li>
<li style="float: left; margin-left: 20px;"><a title="Wszystkie produkty marki Jordan Brand" href="#"><img title="Jordan Brand" src="#" alt="Jordan Brand" height="100" width="100" /></a></li>
<li style="float: left; margin-left: 20px;"><strong>Popular serie</strong></li>
<li style="float: left; margin-left: 20px;"><a title="Wszystkie produkty marki Nike" href="#"><img title="Nike" src="#" alt="Nike" height="100" width="100" /></a></li>
<li style="float: left; margin-left: 20px;"><strong>Popular serie</strong></li>
</ul>
</div>

我想制作像

这样的内联列表

LOGO1热门产品| LOGO2热门产品| LOGO3热门产品

在热门产品标题下方，我想制作另一个列表，如

Air Max

空军等

Answer 1

以下是您的代码的简短扩展...只是为了给您一个想法http://jsfiddle.net/nKT3u/1/

<div>
<ul style="display: inline; list-style-type: none;">
<li style="float: left; margin-left: 20px;"><a title="Wszystkie produkty marki Adidas" href="#"><img title="Adidas" onmouseover="show('adidas')" onmouseout="hide('adidas')" src="#" alt="Adidas" height="100" width="100" /></a>
<ul id="adidas" style="display:none">
    <li>hello</li>
    <li>world</li>
</ul>
</li>
<li style="float: left; margin-left: 20px;"><strong>Popular serie</strong></li>
<li style="float: left; margin-left: 20px;"><a title="Wszystkie produkty marki Jordan Brand" href="#"><img title="Jordan Brand" onmouseover="show('jordan_brand')" onmouseout="hide('jordan_brand')" src="#" alt="Jordan Brand" height="100" width="100" /></a>
<ul id="jordan_brand" style="display:none">
    <li>more</li>
    <li>and more</li>
</ul>
</li>
<li style="float: left; margin-left: 20px;"><strong>Popular serie</strong></li>
<li style="float: left; margin-left: 20px;"><a title="Wszystkie produkty marki Nike" href="#"><img title="Nike" src="#" alt="Nike" height="100" width="100" /></a></li>
<li style="float: left; margin-left: 20px;"><strong>Popular serie</strong></li>
</ul>
</div>
<div style="clear:both;"></div>
<script>
function show(id){
    document.getElementById(id).style.display = "block";
}

function hide(id){
    document.getElementById(id).style.display = "none";
}
</script>

带有非内联列表的内联列表

1 个答案: