Question

我正在学习如何制作带有下拉的导航栏。这适用于Firefox和Chrome，但不适用于Edge。问题是，一旦鼠标悬停在鼠标悬停之后显示下拉，当鼠标移动并且它有时间显示：无时，你仍然可以看到很少的底部伸出下拉的位置是。这只是当ul浮动时。

我删除了很多css以留下主要是必要的，但包括整个HTML，以防有人想要复制并粘贴到文件中查看。我想知道这是我做错了什么，还是Edge中的一个错误，如果有人能告诉我如何防止这种情况发生。

<html>
    <head>
        <style>
            .right {
                float: right;
            }

            .nav {
               background-color: #444;
            }

            .nav ul {
                list-style: none;
                margin: 0;
                padding: 0;
            }

            .nav li {
                font-size: 1.1em;
                display: inline-block;
            }

            .nav .dropdown {
                position: absolute;
                display: none;
                background-color: #444;
                font-size: 0.9em;
            }

            .nav .dropdown li {
                display: block;
            }

            .nav li:hover ul {
                display: block;
            }

            .nav a {
                text-decoration: none;
                color: #fff;
                display: block; 
            }

            .nav a {
                padding: 15px 25px 15px 25px;
            }
        </style>

    </head>
    <body>
        <div class="nav">
            <ul>
                <li><a href="#">Home</a></li>
                <li class="right"><a href="#">Your...</a>
                    <ul class="dropdown">
                        <li><a href="#">Profile</a></li>
                        <li><a href="#">Bookmarks</a></li>
                        <li><a href="#">Songs</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </body>
</html>

Answer 1

我可能会仓促发布这个问题。我找到了一种通过向导航栏添加边框来隐藏问题的方法。

 .nav {
      background-color: #444;
      border-bottom: solid #444 thin;
 }

浮动后悬停时，下拉列表在Microsoft边缘中无法正确隐藏

1 个答案: