html - CSS 下拉导航 - 下拉菜单出现在父链接上方

Question

<div id="header">
<div class="cont">
<div id="banner">

  <div id="nav">

  <ul>
    <li><a href="index.htm">home</a></li>

    <li><a href="work.html">Works»</a>
    <ul>
      <li><a href="paintings.html">Paintings</a></li>
      <li><a href="#">Watercolour</a></li>
      <li><a href="#">Ink</a></li>
    </ul>
    </li>
    <li style="

 "><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
  </div>
</div>
  <div id="greeting" style="
clear: both;
  ">

导航栏 CSS(完整的 CSS 可以在下面的 JSfiddle 链接中找到)

#nav
{ float:right;
position:relative;
width:100%;
text-align:center;
font-family: monospace, serif;
list-style-type: none;
height:150px;
}
#nav ul
{float: center;
clear: left;
font-family: monospace, serif;
list-style-type: none; 
text-align:center;
padding:0;
}

我的问题示例:http://jsfiddle.net/6n3WK/

正如您从 jsfiddle 链接中看到的那样，当将鼠标悬停在“Works”链接上时，下拉菜单出现在上方我已经四处搜索并尝试自行修复但没有成功。我真的很感谢您的帮助，并且想要解释为什么它会在父链接之上，我之前在下面工作并且我更改了一些 CSS，现在都是 pete tong。 谢谢大家:)

Answer 1

#nav ul li:hover ul {
   display: block;
    opacity: 1;
    position: absolute;
   text-align: center;
   visibility: visible;
}