how do i move my menu left to the side and vertical.

http://www.cjwebconsulting.com/project/template.html

HTML Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Accessible Destinations - Home</title>
	<meta name="description" content="Free Web tutorials">
	<meta name="keywords" content="HTML,CSS,XML,JavaScript">
	<link rel="stylesheet" type="text/css" href="css/main.css">
</head>

<body>

<div class="header1">
		<h2>&nbsp;</h2>
	</div>
	


	<div class="header2">
		<h2>&nbsp;</h2>
	</div>
	
	<div class="menu">
		<ul class="clearfix">
			<li><a href="index.html">Home</a></li>
			<li><a href="about.html">About</a></li>
			<li>
				<a href="#">Services</a>
				<ul>
					<li><a href="areas.html">Areas of Focus</a></li>
					<li><a href="practical.html">Practical Concerns</a></li>
				</ul>
			</li>
			<li><a href="http://healingaxis.wordpress.com">Blog</a></li>
			<li><a href="booking.html">Booking</a></li>
			<li><a href="contact.html">Contact / Hours</a></li>
		</ul>
	</div>
	
	<div class="content">
	  <div class="footer">Website designed by<a href="http://www.cjwebconsulting.com" target="_blank"> CJ Web Consulting</a></div>
      
		
</div>

</body>
</html>

Code:
body {
	background-color: white;
	margin: 10px;
}
.content h2 {
	margin-top: 0;
}

.header1 {
	background-image: url(../images/destinations.jpg);
	height: 100px;
	width: 780px;
	margin: 0 auto;
}

.header2 {
	background-image: url(../images/beachbanner.jpg);
	height: 150px;
	width: 780px;
	margin: 0 auto;
}
.header h1 {
    color: white;
    float: right;
    font-size: 44px;
    font-style: italic;
    margin: 45px;
    position: relative;
    text-transform: uppercase;
    z-index: -1;
}

.menu {
	background-color: #FFFFFF;
	border: 1px solid black;
	width: 780px;
	margin: 0 auto;
}
.menu > ul {
	
	border: 1px inset black;
    list-style-type: none;
    margin: 2px;
    padding: 1px;
}
.menu > ul > li {
    float: left;
    margin-right: 0;
    width: 16.66%;
	position: relative;
}
.menu ul li ul {
	position: absolute;
	background-color: white;
	border: 1px solid black;
	border-top: 2px solid white;
	list-style-type: none;
	margin: 0;
	padding: 0;
	width: 100%;
	display: none;
}
.menu ul li:hover ul {
	display: block;
}
.menu ul li ul li {
	margin-top: 3px;
}
.menu a {
    color: black;
    display: block;
    text-align: center;
    text-decoration: none;
}
.menu a:hover {
    background-color: #000000;
    color: white;
}

.content {
	background-color: white;
	width: 760px;
	margin: 0 auto;
	min-height: 300px;
	padding: 50px 10px 10px;
}


.eduTable {
	width: 455px;
	margin: 0 auto;
	border: 0;
	padding: 0;
}
.eduTable td {
	vertical-align: top;
	text-align: left;
}
.eduTable th:first-child, .eduTable td:first-child {
	text-align: left;
}
.eduTable h4 {
	margin: 0;
}
.eduTable ul {
	margin-top: 0;
	padding-left: 15px;
	list-style-type: square;
}

.bio {
	width: 455px;
	margin: 0 auto;
}

.areas {
	width: 455px;
	margin: 0 auto;
}

.contact {
	width: 550px;
	margin: 0 auto;
}

.imageLeft {
	float: left;
	margin-right: 20px;
	margin-bottom: 15px;
}
.imageRight {
	float: right;
	margin-left: 20px;
	margin-bottom: 15px;
}

.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

.footer {
    text-align: center;
    margin-top: 50px;
}

.footer1 {
    text-align: center;
    margin-top: 50px;
	color:#FFFFFF
}