CSS菜单向上？

我从一个教程网站得到了这个，并且正在修改它为我的网站。CSS菜单向上？

我在想，如果有人可以帮助我得到这个CSS菜单代码推出菜单，而不是向上的它会马上向下。

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<style type="text/css"> 
body { 
    font-family: Verdana, Helvetica, sans-serif; 
    background:#F0F0F0; 
    margin: 0; 
    padding: 0; 
    color: #000; 
} 
#menu { 
    clear: both; 
    float: left; 
    margin: 0; 
    padding: 0; 
    border-bottom: 1px solid #000; 
    width: 100%; 
    font-size: 90%; 
    z-index: 1000; 
    position: relative; 
} 
#menu ul { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    float: right; 
    position: relative; 
    right: 50%; 
} 
#menu ul li { 
    margin: 0 0 0 1px; 
    padding: 0; 
    float: left; 
    position: relative; 
    left: 50%; 
    top: 1px; 
} 
#menu ul li a { 
    display: block; 
    margin: 0; 
    padding: .6em .5em .4em; 
    font-size: 1em; 
    line-height: 1em; 
    background: #ddd; 
    text-decoration: none; 
    color: #444; 
    font-weight: bold; 
    border-bottom: 1px solid #000; 
} 
#menu ul li.active a { 
    color: #fff; 
    background: #000; 
} 
#menu ul li a:hover { 
    background: #36f; 
    color: #fff; 
    border-bottom: 1px solid #03f; 
} 
#menu ul li:hover a, 
#menu ul li.hover a { 
    background: #36f; 
    color: #fff; 
    border-bottom: 1px solid #03f; 
} 
#menu ul ul { 
    display: none; 
    position: absolute; 
    top: 2em; 
    left: 0; 
    right: auto; 
    width: 10em; 
} 
#menu ul ul li { 
    left: auto; 
    margin: 0; 
    clear: left; 
    width: 100%; 
} 
#menu ul ul li a, 
#menu ul li.active li a, 
#menu ul li:hover ul li a { 
    font-size: .8em; 
    font-weight: normal; 
    background: #eee; 
    color: #444; 
    line-height: 1.4em; 
    border-bottom: 1px solid #ddd; 
} 
#menu ul ul li a:hover, 
#menu ul li.active ul li a:hover, 
#menu ul li:hover ul li a:hover { 
    background: #36f; 
    color: #fff; 
} 
#menu ul ul.last { 
    left: auto; 
    right: 0; 
} 
#menu ul li:hover ul { 
    display: block; 
} 
</style> 
</head> 
<body> 
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 
<div id="menu"> 
    <ul> 
     <li><a href="#">Tab one</a> 
     <ul> 
      <li><a href="#">Link one</a></li> 
      <li><a href="#">Link two</a></li> 
      <li><a href="#">Link three</a></li> 
      <li><a href="#">Link four</a></li> 
      <li><a href="#">Link five</a></li> 
     </ul> 
     </li> 
     <li class="active"><a href="#" class="active">Tab two</a> 
     <ul> 
      <li><a href="#">Link one</a></li> 
      <li><a href="#">Link two</a></li> 
      <li><a href="#">Link three</a></li> 
      <li><a href="#">Link four</a></li> 
      <li><a href="#">Link five is a long link that wraps</a></li> 
     </ul> 
     </li> 
     <li><a href="#">Long tab three</a> 
     <ul> 
      <li><a href="#">Link one</a></li> 
      <li><a href="#">Link two</a></li> 
      <li><a href="#">Link three</a></li> 
      <li><a href="#">Link four</a></li> 
      <li><a href="#">Link five</a></li> 
     </ul> 
     </li> 
     <li><a href="#">Tab four</a> 
     <ul class="last"> 
      <li><a href="#">Link one</a></li> 
      <li><a href="#">Link two</a></li> 
      <li><a href="#">Link three</a></li> 
      <li><a href="#">Link four</a></li> 
      <li><a href="#">Link five</a></li> 
     </ul> 
     </li> 
    </ul> 
</div> 
</body> 
</html>

来源

2012-02-11 Setu Shah