My Sub-List won't be verticle

[Garethp]

For the last few days I've been trying to find a tutorial where I can make my currently horizontal list have a vertical drop down. I don't really know much about CSS, so it's been difficult. Now I've finally got dropdown menu's, however the dropdowns display in a horizontal fashion aswell. I've set them to display:block when the main li is hovered over. I'm not really sure how to get this working so I was wondering if someone could help me. Here's my code

 

CSS:

#submenulist {
	padding: 0px;
	margin: 0px;
	text-align: center;
}

#submenulist ul {
	margin-left: 0;
	padding-left: 0;
	white-space: nowrap;
}

#submenulist li {
	display: inline;
	list-style-type: none;
position: relative;
}

#submenulist a { 
	padding-top: 1px;
	padding-bottom: 1px;
	padding-left: 7px;
	padding-right: 7px;
	margin-right: 3px;
}

#submenulist a:link, #submenulist a:visited {
	color: #fff;
	text-decoration: none;
	font-weight: bold;
}

#submenulist a:hover{
	color: #000;
	text-decoration: none;
	font-weight: bold;
}

#submenulist ul {
position: absolute;
display: block;
z-index: 500;
}

#submenulist ul {
top: 20;
left: 0%;
}

#submenulist li ul {display: none;}

#submenulist li:hover ul
{
display: block;
background: #547189 url(images/menubg.jpg) top left repeat-x;
padding:10
}

 

HTML

<ul id="submenulist">
<li>Browse By:
<ul>
	<li>Thing 1</li>
	<li>Thing 2</li>
</ul>
</li>
<li><a href="browse.php?type=recent" title="Most Recent">Most Recent</a></li> 
<li><a href="authors.php?list=authors" title="Authors">Authors</a></li>
<li><a href="browse.php?type=categories" title="Categories">Categories</a></li>
<li><a href="browse.php?type=featured" title="Featured Stories">Featured Stories</a></li>

<li><a href="browse.php?type=titles" title="Titles">Titles</a></li> 
<li><a href="browse.php?type=series" title="Series">Series</a></li> 
<li><a href="browse.php?type=challenges" title="Challenges">Challenges</a></li>
<li><a href="toplists.php" title="Top Tens">Top Tens</a></li>  
<li><a href="search.php" title="Search">Search</a></li> 
</ul>

 

Thing 1 and Thing 2 display side by side. I'm considering using <br><br> before each </li> in the dropdown, but I want to do this properly.

 

If anyone could give me a pointer I'd be extremely grateful