Инлайн список со списком не инлайн

Пожалуйста, помогите мне с этим 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 Популярные producs | LOGO2 Популярные продукты | Logo3 Популярные producs

И ниже популярного продукта заголовка я хочу сделать еще один список, как

Air Max

ВВС и т.д.

источник

2014-03-18 PrestaShark

Просто предложение, не использовать встроенные стили, особенно при создании скрипки для г что мы можем использовать. Это делает его настолько трудным для чтения, тогда как внешний CSS легко понять и организовать. –

Возможный дубликат [Правильный способ создания HTML-вложенного списка?] (Http://stackoverflow.com/questions/5899337/proper-way-to-make-html-nested-list) –

Похоже на то, что вы пытаетесь do делает выпадающий список. Попробуйте выполнить поиск в Интернете, как сделать выпадающий список - есть миллион способов сделать это. – ElliotSchmelliot

Вот краткое расширение кода ... просто дать Вам идею 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>

источник

2014-03-18 22:13:15

Инлайн список со списком не инлайн

ответ

Смежные вопросы