Help with adding CSS to create a drop down menu

Hi,

Below is the CSS I currently have for my menu but I wish to add a drop down menu for Products which will contain a second level menu ie. under products it will have Baby Travel and Baby Education. No more menus leading off of those secondary ones.

My site is http://abcbabyland.com/blog/

I have looked at various tutorials but all the CSS seems to be split down further than what I already have and as I don’t understand how each part of the code works, I’m having trouble matching up the CSS.

I wish to use the background images for the second menu but repeat downwards.

#header #header-menu {
		position: absolute;
		top: 210px;
		right: 13px;
		height: 44px;
	}

	#header #header-menu ul {
		margin: 0;
		padding: 0;
		list-style-type: none;
		height: 44px;
	}

	#header #header-menu ul li {
		float: left;
		width: 100px;
		height: 44px;
		margin-right: 8px;
		font: bold 12px/32px "Georgia", Georgia;
		color: #ffffff;
		text-align: center;
		background: url("images/header_menu.gif") no-repeat;
	}

	#header #header-menu ul li a {
		color: #ffffff;
		height: 44px;
		text-decoration: none;
		display: block;
	}

	#header #header-menu ul li a:hover {
		color: #ffffff;
		background: url("images/header_menu_hover.gif") no-repeat;
	}

The HTML in the header.php is as below:

<div id="header-menu">
			<ul>
				<?php if (is_home()) { ?>
				<li class="current_page_item"><a href="<?php echo get_option('home'); ?>/">Home</a></li>
				<?php } else { ?>
				<li><a href="<?php echo get_option('home'); ?>/">Home</a></li>
				<?php } ?>
				<?php wp_list_categories('sort_column=name&amp;title_li=&amp;depth=3'); ?>
			</ul>
</div>

I would appreciate any help.

Thanks
Wendy