Question

我的css下拉导航在这里有一点问题当我将鼠标悬停在第一个项目上时，会显示下拉列表，这很好。当我离开它时它也有延迟，也很好。这很好，因为我一直在顶层移动。

然而

如果我要导航向后，最后一个，到最后一个等等，我会注意到下拉列表显示在后面之前的那个。

我假设这是因为它们出现在我的HTML上。

有没有人对此有任何解决方案？欢迎使用CSS甚至jQuery。

我提供了我的代码和jsfiddle。

谢谢大家的时间！

编辑：我刚刚意识到我的延迟并非理想。我可以将鼠标从subnav上移开，它会停留几秒钟，但是当我再次回到它时，它是不可点击的。可能是由于pointer-events:none

JSFiddle：http://jsfiddle.net/4wLtmx9m/

#menu {
    position: relative;
}
#navbar {
    position: absolute;
    margin: 0;
    padding: 0;
    z-index: 999;
    width: 100%;
}
#navbar li {
    list-style: none;
    float: left;
    width: 16.6%;
    background-color: #F6F6F6;
    text-align: center;
    color:#9a9999;
    /*background:url(../Assets/icons/nav-sprite-icons.png)0 20px;*/
}
#navbar li a {
    display: block;
    padding: 3px 8px;
    text-transform: uppercase;
    text-decoration: none;
    color: #999;
    font-weight: bold;
}
#navbar li a:hover {
    color: #000;
}
#navbar li ul {
    opacity:0;
    top:0px;
    position:absolute;
    background-color:black;
    z-index: -100;
    left: 0;
    width: 100%;
    pointer-events:none;
    -webkit-transition: all 0.2s ease 3s;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease 1s;
}
#navbar li ul li {
    background-color:black;
    color:white;
}
#navbar li ul li a {
    color:white!important;
}
#navbar li:hover ul {
    opacity:1;
    background-color:black;
    position: absolute;
    display: inline;
    top:22px;
    left: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    z-index:-100;
    -webkit-transition: all 0.2s ease 0s;
    /*animation: fadein 0.2s;
    -webkit-animation: fadein 0.2s;
    -moz-animation: fadein 0.2s;*/
    pointer-events:auto;
}
#navbar * {
}
@-webkit-keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
#navbar li:hover li, #navbar li.hover li {
    float: left;
    background-color:black;
}
#navbar li:hover li a, #navbar li.hover li a {
    color: #FFF;
}
#navbar li li a:hover {
    color: #357;
}

HTML

<div id="menu">
    <ul id="navbar">
        <li><a href="#">Occasions</a>

            <ul>
                <li><a href="#">Valentine's Day</a>
                </li>
                <li><a href="#">Easter</a>
                </li>
                <li><a href="#">Mother's Day</a>
                </li>
                <li><a href="#">Father's Day</a>
                </li>
                <li><a href="#">Wedding</a>
                </li>
                <li><a href="#">Birthday</a>
                </li>
                <li><a href="#">Baby</a>
                </li>
            </ul>
        </li>
        <li><a href="#">Cards &amp; Invitations</a>

            <ul>
                <li><a href="#">Invitations</a>
                </li>
                <li><a href="#">Baby</a>
                </li>
                <li><a href="#">Weddings</a>
                </li>
                <li><a href="#">Announcements</a>
                </li>
                <li><a href="#">Holiday</a>
                </li>
            </ul>
        </li>
        <li><a href="#">Canvas Prints</a>

            <ul>
                <li><a href="#">Full Wrap</a>
                </li>
                <li><a href="#">Colour Edge Wrap</a>
                </li>
                <li><a href="#">Frame</a>
                </li>
            </ul>
        </li>
        <li><a href="#">Mugs</a>

            <ul>
                <li><a href="#">11oz Single Image Mug</a>
                </li>
                <li><a href="#">11oz Double Image Mug</a>
                </li>
                <li><a href="#">11oz Scrapbook Mug</a>
                </li>
                <li><a href="#">11oz Fullwrap Mug</a>
                </li>
                <li><a href="#">14oz Travel Mug</a>
                </li>
                <li><a href="#">17oz Latte Mug</a>
                </li>
            </ul>
        </li>
        <li><a href="#">Device Cases</a>

            <ul>
                <li><a href="#">Smartphones</a>
                </li>
                <li><a href="#">Tablets</a>
                </li>
                <li><a href="#">iPods</a>
                </li>
            </ul>
        </li>
        <li><a href="#">Photo Gifts</a>

            <ul>
                <li><a href="#">Keychains</a>
                </li>
                <li><a href="#">Mousepads</a>
                </li>
                <li><a href="#">Playing Cards</a>
                </li>
                <li><a href="#">Puzzles</a>
                </li>
                <li><a href="#">T-Shirts</a>
                </li>
            </ul>
        </li>
    </ul>
</div>

Answer 1

我没有阅读和调整您的代码，而是使用最少的CSS编写了一个工作示例。希望它有所帮助。

＆＃13;

#navbar {
  white-space: nowrap;
}

#navbar li {
  list-style: none;
  position: relative;
  display: inline-block;
  margin: 0 1em 0 0;
  padding: 0 0 1em;
}

#navbar li ul {
  display: none;
  padding: 0;
  margin: .5em 0 0;
  width: 10em;
  position: absolute;
  left: 0;
}

#navbar li li {
  display: block;
  margin: 0 0 .5em;
  padding: 0;
}

#navbar>li:hover>ul {
  display: block;
}

＆＃13;

<ul id="navbar">
  <li>
    <a href="#0">Occasions</a>
    <ul>
      <li>
        <a href="#1">Valentine's Day</a>
      </li>
      <li>
        <a href="#2">Easter</a>
      </li>
      <li>
        <a href="#3">Mother's Day</a>
      </li>
      <li>
        <a href="#">Father's Day</a>
      </li>
      <li>
        <a href="#">Wedding</a>
      </li>
      <li>
        <a href="#">Birthday</a>
      </li>
      <li>
        <a href="#">Baby</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">Cards &amp; Invitations</a>
    <ul>
      <li>
        <a href="#">Invitations</a>
      </li>
      <li>
        <a href="#">Baby</a>
      </li>
      <li>
        <a href="#">Weddings</a>
      </li>
      <li>
        <a href="#">Announcements</a>
      </li>
      <li>
        <a href="#">Holiday</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">Canvas Prints</a>
    <ul>
      <li>
        <a href="#">Full Wrap</a>
      </li>
      <li>
        <a href="#">Colour Edge Wrap</a>
      </li>
      <li>
        <a href="#">Frame</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">Mugs</a>
    <ul>
      <li>
        <a href="#">11oz Single Image Mug</a>
      </li>
      <li>
        <a href="#">11oz Double Image Mug</a>
      </li>
      <li>
        <a href="#">11oz Scrapbook Mug</a>
      </li>
      <li>
        <a href="#">11oz Fullwrap Mug</a>
      </li>
      <li>
        <a href="#">14oz Travel Mug</a>
      </li>
      <li>
        <a href="#">17oz Latte Mug</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">Device Cases</a>
    <ul>
      <li>
        <a href="#">Smartphones</a>
      </li>
      <li>
        <a href="#">Tablets</a>
      </li>
      <li>
        <a href="#">iPods</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">Photo Gifts</a>
    <ul>
      <li>
        <a href="#">Keychains</a>
      </li>
      <li>
        <a href="#">Mousepads</a>
      </li>
      <li>
        <a href="#">Playing Cards</a>
      </li>
      <li>
        <a href="#">Puzzles</a>
      </li>
      <li>
        <a href="#">T-Shirts</a>
      </li>
    </ul>
  </li>
</ul>

＆＃13;

如何在不影响延迟的情况下立即关闭每个下拉菜单？

1 个答案: