Question

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

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

但是当我尝试将光标移动到子菜单项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之间的空闲空间。在这种情况下，最简单的解决方案是为li中的主标签添加边距。将有更多的解决方案如何实现这种效果（在li中添加填充并将背景颜色应用于标签），但这一个是最快的。

搜索＆＃34;添加＆＃34;并且＆＃34;改变了＃34;下面的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只有下拉。您可以使用此背后的想法来解决您的问题。但这适用于用户点击链接时。

＆＃13;

dataGrid1.DataSource = Login("username", "password").DefaultView;
dataGrid1.DataBind();

＆＃13;

.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;
}

＆＃13;

当在li外面盘旋时子菜单隐藏

3 个答案: