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;
  ">

Navbar 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

您需要将li元素设为最高vertical-align：

#nav ul li {
    ...
    vertical-align: top;
}

JSFiddle demo

Answer 2

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

Answer 3

您只需将#nav ul li:hover ul的定位更改为absolute：

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

然后，这会将ul与最近的relative定位容器相关联，在本例中为#nav div。

这是JSFiddle

Answer 4

与定位无关，但关闭了#nav ul li:hover ul li a:hover上的css语句，可能会给你带来一些麻烦

Answer 5

删除position: relative

的#nav ul li:hover ul

这是演示 http://jsfiddle.net/6n3WK/3/

CSS下拉导航 - 显示在父链接上方的下拉列表

5 个答案: