Convert menu to a drop-down menu?

I need a little help. I created some child pages on my site. The problem is, the child pages are showing up as bullet points and I want them to show up as a drop-down menu.
The current code in my header.php is

<div id="foxmenucontainer">
			<div id="foxmenu">
			<ul>
		<?php if (is_page()) { $highlight = "page_item"; } else {$highlight = "page_item current_page_item"; } ?>
			<li class="<?php echo $highlight; ?>"></li>
			<?php wp_list_pages('sort_column=menu_order&depth=1&title_li='); ?>

	</div>

and the code in my style.css is

#foxmenucontainer{
	height:28px;
	background:#0b0d0d;
	display:block;
	padding:0px 0 0px 0px;
	border-top:1px solid #4f5155;
	}
#foxmenu{
	position:relative;
	display:block;
	height:28px;
	font-size:13px;
	font-weight:normal;
	font-family:Tahoma,Verdana,Helvitica,sans-serif;
	}
#foxmenu ul{
	margin:0px;
	padding:0px 0px 0 10px;
	list-style-type:none;
	width:auto;
	float:left;
	}
#foxmenu ul li{
	display:block;
	float:left;
	margin:0 0px 0 0;
	width:84px;
	}
#foxmenu ul li a{
	display:block;
	float:left;
	color:#ccc;
	text-align: center;
	text-decoration:none;
	padding:7px 0px 0 0px;
	width:84px;
	height: 21px;
	background:#eee url(images/li2.gif) no-repeat top right;
	}
#foxmenu ul li a:hover,#foxmenu ul li.current_page_item a{
	color:#fff;
	background:#222 url(images/li2.gif) no-repeat top left;
	width:84px; height: 21px;
	text-align: center;
	}
#foxmenu ul li .current_page_item a,#foxmenu ul li .current_page_item a:hover{
	color:#fff;
	width: 84px; height: 21px;
	background:transparent url(images/li2.gif) no-repeat top right;
	}

Can anyone tell me how to convert my current menu to a drop-down menu? The bullet points I have currently, while okay, just aren’t how I want my site to look.
Thanks in advance!