Question

就在那时......我创建了一个完美无缺的菜单但之后发现我需要添加下拉菜单，但我出于某种原因水平显示并将自身对齐到左边而不是垂直对齐本身位于您悬停的链接下方。令人讨厌的是，我确实创建了一个在另一个网站上运行得非常好的一个，我试图匹配从最后一个到这个的编码，但因为它们的风格不同，所以不顺利。

菜单的html为：

<body>
<div id="header">
    <div id="menu_container">
      <nav>
        <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="overview.html">Overview</a></li>
          <li><a href="strategy.html">Strategy</a></li>
          <li><a href="marketing.html">Marketing</a></li>
          <li><a href="team_and_management.html">Team and Management</a></li>
          <li><a href="#">Gallery</a>
            <ul>
              <li><a href="edgbaston.html">Edgbaston</a></li>
              <li><a href="hockley.html">Hockley</a></li>
              <li><a href="selly_oak.html">Selly Oak</a></li>
            </ul>
          </li>
          <li><a href="contact_us.html">Contact Us</a></li>
        </ul>
      </nav>
    </div>

CSS是：

nav ul {
    list-style: none;
    text-align: center;
    position: relative;
    display: inline-table;
}

nav ul li {
    display: inline;
}

nav ul li a:link, nav ul li a:visited {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 14px;
    font-weight: normal;
    width: 800px;
    color: #FFFFFF;
    line-height: 14px;
    margin: 0px 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #FFFFFF;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
}

nav ul li a:hover, nav ul li a:active {
    border-color: #f9cf19;
}

nav li ul {
    display: none;
    z-index: 999;
}

nav li:hover ul {
    display: block;
    position: absolute;
}

nav li:hover li a:hover {
    background: #000000;
}

非常感谢任何帮助。谢谢你们。

修改：以下是指向该网站的链接：http://vicarage-support.com/our_hostels.html

该链接仅在该页面上，一旦我完成并且页面完成，我将把它添加到其他页面。

一个小提琴：http://jsfiddle.net/e7y6U/

Answer 1

SeeTheC想出了让它垂直对齐的解决方案，但是为了让它在你悬停的链接下方对齐，你必须将它添加到ul li：

nav ul li {
    display: inline;
    position: relative;
    float: left;
}

Answer 2

在悬停上加上这个：

nav li:hover>ul>li {
    display: block;

}

这将是垂直的。你只需要调整它的位置。

Answer 3

尝试添加：

ul > li
{
    position:relative
}

刚刚意识到它无法在IE上运行

下拉菜单不在主菜单下垂直显示

3 个答案: