悬停在 li 外时子菜单隐藏

Question

有一个导航菜单，设计如下图所示。

现在，当我在About Us 上的hover 子菜单打开时。

但是当我尝试将光标移动到子菜单项时，sub-menu gets closed - 原因是 hover 正在从 li 中删除。

我希望菜单保持打开状态，直到光标到达子菜单项。

请注意：菜单和子菜单之间的空间必须保持原样（如上图红色边框所示）。

你可以找到代码的链接，here

任何帮助将不胜感激！

Answer 1

快速解决方案：

ul#nav li:hover > ul  {margin: 40px 0 0 0; border-top: 10px solid #b58d69; }

干杯！

Answer 2

你必须把 li 调高一点，这样它就会覆盖子菜单和这个特定的 li a 之间的空闲空间。在这种情况下，最简单的解决方案是为 li 中的 main 标记添加边距。会有更多的解决方案如何实现这个效果（在 li 内部添加 padding 并将 background-color 应用于标签），但是这个是最快的。

在下方的 css 中搜索“添加”和“更改”注释

    #menu {
      width: 960px;
      height: 40px;
      clear: both;
    }

    ul#nav {
      float: left;
      width: 960px;
      margin: 0;
      padding: 0;
      list-style: none;
      background: #b58d69 url(../img/menu-parent.png) repeat-x;
      -moz-border-radius-topright: 10px;
      -webkit-border-top-right-radius: 10px;
      -moz-border-radius-topleft: 10px;
      -webkit-border-top-left-radius: 10px;
    }

    ul#nav li {
      display: inline-block; /*changed*/
      padding-bottom: 10px; /*added*/
      position: relative; /*added*/
    }

    ul#nav li a {
      float: left;
      font: bold 1.1em arial, verdana, tahoma, sans-serif;
      line-height: 40px;
      color: #fff;
      text-decoration: none;
      margin: 0;
      padding: 0px 20px;
      background: #b58d69 url(../img/menu-parent.png) repeat-x;
      -moz-border-radius-topright: 10px;
      -webkit-border-top-right-radius: 10px;
      -moz-border-radius-topleft: 10px;
      -webkit-border-top-left-radius: 10px;
    }
    ul#nav li a.plus_a { /*added*/
      position: absolute; 

    }
    ul#nav .current a, ul#nav li:hover > a {
      color: #b58d69;
      text-decoration: none;
      background: #30251b;
      -moz-border-radius-topright: 10px;
      -webkit-border-top-right-radius: 10px;
      -moz-border-radius-topleft: 10px;
      -webkit-border-top-left-radius: 10px;
    }

    ul#nav ul {
      display: none;
    }

    ul#nav li:hover > ul  {
      position: absolute;
      width: 920px;
      height: 45px;
      position: absolute;
      margin: 50px 0 0 0;
      background: #fff;
      -moz-border-radius-bottomright: 10px;
      -webkit-border-bottom-right-radius: 10px;
      -moz-border-radius-bottomleft: 10px;
      -webkit-border-bottom-left-radius: 10px;
     }

     ul#nav li:hover > ul li a {
       float: left;
       font: bold 1.1em arial, verdana, tahoma, sans-serif;
       line-height: 45px;
       color: #b58d69;
       text-decoration: none;
       margin: 0;
       padding: 0 20px 0 0;
       background: #fff;
    }

    ul#nav li:hover > ul li a:hover {
      color: #30251b;
      text-decoration: none;
      text-shadow: none;
    }

    ul#nav li:hover > ul {
      display:block !important;
    }

Answer 3

我已经完成了您所要求的事情，这可能会给您一个想法。在 youtube 上的教程中看到了它，它只下拉了 CSS。您可以使用这背后的想法来解决您的问题。但这适用于用户点击链接时。

.fixed-nav-container {
    height: 90px;
    width: 100%;
    background-color: #111;
    position: fixed;
    z-index: 16;
}
.fixed-nav-container:hover {
    opacity: 1;
}
.fixed-nav .active {
    padding: 23px 0px;
    background-color: #2a2730;
    box-shadow: inset 0 3px 7px black;
}
.fixed-nav {
    width: 100%;
    height: 70px;
    font-family: Arial, Helvetica, sans-serif;
}
.fixed-nav ul {
    display: block;
    text-align: center;
}
.fixed-nav ul li {
    display: inline-block;
    padding: 20px 15px;
    font-weight: bold;
    width: 15%;
    border-right: 2px solid #2a2730;
}
.fixed-nav ul li:last-child {
    border-right: 0px;
}
.fixed-nav ul li a {
    text-decoration: none;
    color: silver;
    transition: all linear 0.5s;
    -webkit-transition: all linear 0.5s;
    padding: 10px 0px;
}
.fixed-nav ul li a:hover {
    font-size: medium;
    transition: all linear 0.2s;
    -webkit-transition: all linear 0.2s;
}
.fixed-nav-content {
    position: absolute;
    top: 70px;
    overflow: hidden;
    background-color: #111111;
    color: #FFFFFF;
    max-height: 0px;
}
.fixed-nav-content a {
    text-decoration: none;
    color: #FFFFFF;
}
.fixed-nav-content a:hover {
    background-color: silver;
    box-shadow: inset 0 3px 7px  black;
    color: #2a2730;
}
.fixed-nav-content:active {
    max-height: 400px;
}
.fixed-nav-sub ul {
    padding: 0px;
    list-style-type: none;
    text-align: left;
}
.fixed-nav-sub ul li {
    width: 20%;
}
.fixed-nav-sub ul li a {
    padding: 10px;
    display: inline-block !important;
    background-color: #2a2730;
    box-shadow: inset 0 3px 7px black;
}
.nav-item:focus {
    background-color: #2a2730;
    padding: 10px;
    box-shadow: inset 0 3px 7px black;
}
.nav-item:hover ~ .fixed-nav-content {
    max-height: 400px;
    transition: max-height 0.4s linear;
}

<div class="fixed-nav-container">
    <nav class="fixed-nav">
        <ul>
            <li>
                <a href="#" class="nav-item">About</a>
                <div class="fixed-nav-content">
                    <div class="fixed-nav-sub">
                        <ul>
                            <li><a href="about.php">About Us</a></li>
                            <li><a href="team.php">Meet The team</a></li>
                            <li><a href="recent.php">Recent Projects</a></li>
                        </ul>
                    </div>
                </div>
            </li>
            <li>
                <a href="#" class="nav-item">Services</a>
                <div class="fixed-nav-content">
                    <div class="fixed-nav-sub">
                        <ul>
                            <li><a href="civilworks.php">Civil Works</a></li>
                            <li><a href="electrical.php">Electrical</a></li>
                            <li><a href="watereng.php">Water Engineering</a></li>
                            <li><a href="telecoms.php">Telecoms</a></li>
                            <li><a href="it.php">Info. Technology</a></li>
                            <li><a href="renewable.php">Renewable Energy</a></li>
                            <li><a href="consulting.php">Consulting</a></li>
                        </ul>
                    </div>
                </div>
            </li>
        </ul>
    </nav>
</div>