需要说明的是：
首先为了获得主菜单左侧的边框，我增加了一个 id="Nav" 的块元素，并且浮动在左侧（发现没有了这个浮动，不会出现边框）。等一下看看直接让 Menu 浮动在左侧会不会有。
然后对于子菜单的定位，同横向有些不同。

演示：
下拉菜单，纵向：/upload/DropDownMenu_V.htm
下拉菜单，横向：/upload/DropDownMenu_H.htm
菜单翻转图片效果：/upload/RollImage.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
<title>下拉菜单，竖向</title>  
<style type="text/css" media="screen">  
<!--   
#Nav { /*Make the left border */   
width: auto;   
float: left;   
border-left: 1px solid #777;   
}   
ul {   
margin: 0px;   
padding: 0px;   
list-style: none;   
/*display: inline;*/   
}   
ul li {   
position: relative;   
width: 120px;   
float: left;   
}   
li ul {   
position: absolute;   
left: 0px;   
top: 23px;   
display: none;   
border-bottom: 1px solid #777;   
border-left: 0px;   
}   
ul li a {   
display: block;   
font-size: 12px;   
line-height: 22px;   
text-decoration: none;   
color: #333;   
background-color: #FFF;   
height: 22px;   
padding-left: 8px;   
border: 1px solid #777;   
border-left: 0px;   
}   
ul li ul li a { /* The border of main menus is different from the sub menus */   
border: 1px solid #777;   
border-bottom: 0px;   
}   
a:hover {   
color: #F60;   
background-color: #EFEFEF;   
}   
/* Fix IE. Hide from IE Mac */   
* html ul li {   
float: left;   
height: 1%;   
}   
* html ul li a {   
height: 1%;   
}   
/* End */   
li:hover ul, li.over ul {   
display: block;   
}   
-->  
</style>  
<script language="javascript" type="text/javascript">  
<!--   
startList = function() {   
if (document.all && document.getElementById) {   
var menuRoot = document.getElementById("Menu");   
for (var i = 0; i < menuRoot.childNodes.length; i++) {   
var node = menuRoot.childNodes[i];   
if (node.nodeName == "LI") {   
node.onmouseover = function() {   
this.className += " over";   
}   
node.onmouseout = function() {   
thisthis.className = this.className.replace(" over", "");   
}   
}   
}   
}   
}   
window.onload = startList;   
-->  
</script>  
</head>  
  
<body>  
<div id="Nav">  
<ul id="Menu">  
<li><a href="#">Home</a></li>  
<li><a href="#">About us</a>  
<ul>  
<li><a href="#">Brief</a></li>  
<li><a href="#">History</a></li>  
<li><a href="#">Awards</a></li>  
</ul>  
</li>  
<li><a href="#">Services</a>  
<ul>  
<li><a href="#">Sites</a></li>  
<li><a href="#">Hosts</a></li>  
<li><a href="#">E-mail</a></li>  
</ul>  
</li>  
<li><a href="#">Contact us</a>  
<ul>  
<li><a href="#">Asia</a></li>  
<li><a href="#">North American</a></li>  
<li><a href="#">Europe</a></li>  
</ul>  
</li>  
</ul>  
</div>  
</body>  
</html>