de horizintal a vertical

[originalconcept]

Hola, como le va?

Como hago para pasar este menu de lista horizontal a uno vertical?

gracias

Código PHP:

 <div id="navbar" class="clearfloat">
 
<ul id="page-bar" class="left clearfloat">
 
<li><a href="<?php echo get_option('home'); ?>/">inicio</a></li>
 
<?php wp_list_pages('sort_column=menu_order&title_li='); ?>
 
</ul>
</div>  

Código HTML:

/* Navigation Bar*/
#navbar {
	margin:0 auto;
	margin-top:7px;
	padding:0px 0px;
	text-transform:uppercase;
	background:#A8DF00}

#page-bar {
	width:722px;
	}

#page-bar ul {
	list-style: none;
	}

#page-bar li {
	float:left;
	list-style:none;
	cursor: pointer;
	display:block;
	border-right:1px solid #98CA00;
	}

#page-bar li:hover {
	background: #CFFF40}


#page-bar a, #page-bar a:visited {
	margin: 0px;
	padding:10px 16px;
	font-weight:bold;
	color:#000;
	display:block;
	}

#page-bar a:hover {
	text-decoration:none;
	display:block;
	color:#333}

#searchform {
	width:194px;
	float:right;
	text-align:right;
	padding-top:8px;
	margin-right:10px;
	}
#searchform input{border: #95C600 1px solid;}

/* Dropdown Menus */		
#page-bar li {
	float: left;
	margin: 0px;
	padding: 0px;
	}
	
#page-bar li li {
	float: left;
	margin: 0px;
	padding: 0px;
	width: 122px;
	text-transform:none;
	}
	
#page-bar li li a, #page-bar li li a:link, #page-bar li li a:visited {
	background: #cfff40;
	width: 200px;
	float: none;
	margin: 0px;
	padding: 5px 10px 5px 18px;
	border-top: 1px solid #AFEA00;
	}
	
#page-bar li li a:hover, #page-bar li li a:active {
	background: #ECFFB3;
	padding: 5px 10px 5px 18px;
	}

#page-bar li ul {
	position: absolute;
	width: 10em;
	left: -999em;
	}

#page-bar li:hover ul {
	left: auto;
	display: block;
	}
	
#page-bar li:hover ul, #page-bar li.sfhover ul {
	left: auto;
	}