浮动后，下拉菜单无法在Microsoft Edge中正确隐藏

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 Edge中正确隐藏

问题描述

1 个解决方案

解决方案1
0

浮动后，下拉菜单无法在Microsoft Edge中正确隐藏

问题描述

1 个解决方案

解决方案1 0

解决方案1
0