0

Please help me with this 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>

I want to make inline list like

LOGO1 Popular producs | LOGO2 Popular producs | LOGO3 Popular producs

And below popular product header i want to make another list like

Air Max

Air Force etc

  • 2
    Just a suggestion, don't use inline styles, especially when making a fiddle for the rest of us to use. It makes it so difficult to read, whereas external CSS is easy to understand and organize. – Dryden Long Mar 18 '14 at 21:49
  • possible duplicate of [Proper way to make HTML nested list?](http://stackoverflow.com/questions/5899337/proper-way-to-make-html-nested-list) – Dryden Long Mar 18 '14 at 21:52
  • 1
    It sounds like what you are trying to do is make a dropdown. Try doing a search online for how to make a dropdown - there are a million ways to do it. – ElliotSchmelliot Mar 18 '14 at 21:58
  • basicly, you would just need to display:inline-block (or float) li of first level http://codepen.io/anon/pen/rafoe/ – G-Cyrillus Mar 18 '14 at 22:23

1 Answers1

0

Here is a short extension of your code ... just to give you an idea 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>
Ra Mon
  • 127
  • 3