Question

这实际上是我在CSS中搞乱的问题，并最终在不知不觉中删除或覆盖某些内容。当我将鼠标悬停在下拉列表的导航链接上时，它会淡入。但是，当鼠标移开后它消失时它不会消失。

<nav class="bg">
    <ul class="width nav">
        <li><span></span></li>
        <li><a href="#">Link</a></li>
        <li><span></span></li>
        <li><a href="#">DropLink</a>
            <ul class="drop dr2">
                <li><a href="#" title="link">Link</a></li>
                <li><a href="#" title="link">Link</a></li>
                <li><a href="#" title="link">Link</a></li>
            </ul>
        </li>
        <li><span></span></li>
    </ul>
</nav>

CSS（对不起这个上的混乱。在完整的CSS文件中，它们都结合在一起以节省空间）：

*{margin:0;padding:0;font-size:small;font-family:Roboto;vertical-align:middle;}
.drop,nav{border:1px solid #BBB;}
body>.main,nav>ul{font-size:0;}
.width{margin:0 auto;width:84%;}
.width,.bg{min-width:1000px;}
.bg,.drop{background:linear-gradient(#444,#000,#444);}
nav{border-left:none;border-right:none;}
nav>ul:after{content:"";}
nav a{padding:8px;}
nav a:hover, nav a:active{color:#BBB;}
.drop{z-index:2;left:-9999px;top:-9999px;opacity:0;border-top:none;}
.dr1{transform:translateX(-28.5%);width:230%;}
.dr2{transform:translateX(-27%);width:216%;}
.drop li{white-space:nowrap;display:block;}
.nav li:hover .drop{left:0;top:100%;opacity:1;transition:opacity .5s,top 0s,left 0s;}
nav span{border-left:1px solid #000;border-right:1px solid #555;padding:7px 0;}
nav{font-weight:bold;}
nav>ul{text-align:justify;}
nav>ul,nav>ul:after{width:100%;}
a{text-decoration:none;}
a{color:#FFF;}
.nav li:hover .drop{text-align:center;}
nav a,nav li,nav>ul:after{display:inline-block;}
nav li,nav>ul{position:relative;}
.drop{position:absolute;}

在我问的时候，我不妨一石二鸟，再问别的。如果放大边框所在的条形图，您会发现它们实际上与导航栏本身没有相同的高度。如果我增加CSS中相关区域的填充，它会变成一个像素太长。如果我不这样做，那么它的一个像素就太短了。它永远不是酒吧高度的100％。我最近没有问过这个问题，但在更改整个导航条代码后，我一直无法复制解决方案。

Answer 1

您的问题是，您只是在悬停时设置left和top规则，但是当您没有悬停时，下拉列表会完全离开视图，因此尽管不透明度如果褪色，您可以看不到。

您需要做的是将两个群组选择器更改为具有相同的位置，无论是否悬停。

E.G。

.nav li:hover .drop {
    left:0;
    top:100%;
    opacity:1;
    transition:opacity .5s, top 0s, left 0s;
}

应成为两个选择器：

.nav li .drop {
    left: 0;
    top: 100%;
    pointer-events: none;
    opacity: 0;
    transition: opacity .5s, top 0s, left 0s;
}

.nav li:hover .drop {
    pointer-events: auto;
    opacity: 1;
}

此外，即使没有悬停，也应设置text-align属性，否则文本将向左移动。

E.G。

删除：

.nav li:hover .drop { text-align:center; }

添加

.nav li .drop { text-align:center; }

如果您进行了这些更正，则应获得：jsfiddle.net/4PLbd/28

注意：

我不想挑剔，但你的代码风格很糟糕，使得修复困难，总是试图使代码可读。我没有在这里清理很多代码，尽管它应该是。

Answer 2

您应该考虑重新编码，一半的CSS是不必要的，还必须清理。我还拿出了不需要的代码，我可以告诉你如何更好地完成它，例如带有span元素的空格，不是必需的。此外，良好的代码结构很重要，因为它可以帮助您找到并找到问题。我尽我所能清理了这个。再一次，这会让你的第一个问题完成。

以下是我所做的一些CSS更改。查看Jsfiddle

.drop {
  opacity: 0;
  transition: all .5s ease;
 }

ul.nav li:hover .drop {
  opacity: 1;
  transition: all .5s ease;
}

Navbar淡出问题

2 个答案: