Putting several links in a line contained in a wrapper - html

Question

I am doing a drop down menu and i want the drop down items to all be in a line and probably drops to the next line on screen resolution. my html is
HTML
<li class="main"> Menu
<ul>
<li class="sub-menu"><a href="#">
<div class="content" style="width:300px;">
<img src="image.jpg"><p>text</p>
</div></a>
</li>
<li class="sub-menu"><a href="#">
<div class="content">
<img src="image.jpg"><p>text</p>
</div></a>
</li>
</ul>
</li>
CSS
.main {float:left; display:inline-block; width:auto}
.sub-menu{float:left; width:300px;}
.content{width:100%}
What I am targeting is when someone clicks the main menu "menu" it drops down to the sub menu "sub-menu" and all sub menus come in line until screen width changes and the last one automatically goes to a next line. Any help will be much appreciated people!!!
Thanks in advance.
Michelle

Answer 1

Your question is a little hard to understand, but from what I'm guessing, you want to click the main menu, and a sub menu drops down, displaying the contents (img with text).
This might be what you're looking for:
<style>
.main {background-color: red;}
.sub-menu {background-color: blue;}
.sub-menu a {display: inline-block; color: white;}
</style>
<div class="main">
Menu
</div>
<div class="sub-menu">
<img src="image.jpg"> text
<img src="image.jpg"> text
</div>
Where you can make the sub-menu hidden until you click the main menu. You might also want to add some padding to the links for spacing. Colors are there so you can see the layout.
<p> elements automatically drop a line in web display, making them display below the img tags.