Hi all,

First post, and yep, some n00b questions.

I'm trying to style some submenus in a dropdown menu. Currently, this menu uses straight HTML and CSS. So far so good. What I don't know how to do is make the submenus expand horizontally, so that they match the width of the grey bar. I don't even know what phrase to search for, to start trying to help myself out!!

Screen Shot 2012-03-20 at 2.15.43 PM.png

The submenu will match the entire width of the grey bar no matter which element is the parent - and the submenu items should be displayed in multiple columns, spanning the width of said submenu container.

The code I'm using is simply
Code:
<ul id="spMenu">
<li><a href="#">Stuff</a></li>
<li><a class="arrow" href="#">And</a>
	<ul class="subMenu">
		<li><a href="#">item</a></li>
		<li><a href="#">item</a></li>
		<li><a href="#">item</a></li>
		<li><a href="#">item</a></li>
		<li><a href="#">item</a></li>
    </ul>
</li>
<li><a class="arrow" href="#">Things</a>
	<ul class="subMenu">
		<li><a href="#">item</a></li>
		<li><a href="#">item</a></li>
		<li><a href="#">item</a></li>
		<li><a href="#">item</a></li>
		<li><a href="#">item</a></li>
    </ul>
</li>
...and so on, down to...
<li><a class="arrow" href="#">Foobar</a>
	<ul class="subMenu">
		<li><a href="#">item</a></li>
    </ul>
</li>
<li><a href="#">Baz</a></li>
</ul>
I *think* that the styling should go on that .submenu UL, but I'm not sure how to tell that element, "your left margin is going to be independent of your parent. And so is your right margin. And they're going to be much, much wider..."

I would also like this to be fluid, rather than fixed - to expand and contract with varying browser or device sizes.

So what do I go look up, to figure out how to style the submenus so that they display the way I want them to?