<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div id="container">
<nav id="menu_h">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
</ul>
</nav>
<nav id="left_column">
<ul id="menu_left">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
</ul>
</nav>
<!--container--></div>
</body>
</html>
html, body {
margin: 0;
font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #000;
background: #fc6;
}
#container {
width: 800px;
margin: 0 auto;
border: 2px solid #999;
background: #0ff;
}
/********************Horizontal ul menu*****************************/
nav#menu_h {
margin: 0 0 50px;
background: #9C9;
}
#menu_h ul {
margin: 0px auto;
padding: 0;
overflow: auto;
background: #ccc;
list-style-type: none;
text-align: center;
}
#menu_h li {
width: 112px;
display: inline-block;
background: #ccc;
text-align: center;
}
#menu_h li a {
display: block;
color: #330;
text-decoration: none;
}
#menu_h li a:hover {
color: #fff;
background: #f00;
}
/********************Vertical ul menu*****************************/
nav#left_column {
width: 147px;
height: 300px;
margin: 50px 0 0 0;
padding: 20px 0 0 0;
border: 1px solid #000;
background: #cc9;
}
ul#menu_left {
padding: 0;
list-style-type: none;
background: #ccc;
}
#menu_left li a {
line-height: 30px;
width: 147px;
display: block;
color: #000;
text-decoration: none;
text-align: center;
}
#menu_left li a:hover {
color: #fff;
background: #f00;
}