Question

我有这个下拉菜单代码，现在效果很好（感谢善良的人帮助我former post），除了在资源管理器中。资源管理器中的下拉菜单根本不显示，除非我将“dropdown-level-1”中的位置更改为“fixed”。 “已修复”的问题是下拉菜单不会随着滚动而移动。

请帮助我让这个菜单显示在资源管理器中？...

这是代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    .nav {
        position: relative;
        top: 0;
        width: 80%;
        height: auto;
        border: 1px solid #e6e6e6;
        margin: 0 auto;
        font-family: 'Helvetica', Arial, sans-serif;
    }
    /* Root Level */
    .dropdown-menu {
        position: relative;
        top: 0;
        left: 0;
        padding: 0;
        margin: 0;
        background: #eeeeee;
    }
    /* Clear the float */
    .dropdown-menu:after {
        display: table;
        content: "";
        clear: both;
    }
    .dropdown-menu li {
        display: block;
        border-left: 1px solid #e6e6e6;
        border-right: 1px solid #e6e6e6;
        min-width: 150px;
        float: left;

    }
    .dropdown-menu li a:link,
    .dropdown-menu li a:visited {
        padding: 10px 15px;
        text-decoration: none;
        color: #111111;
        display: block;
    }
    .dropdown-menu li a:hover,
    .dropdown-menu li a:focus {
        color: #222222;
    }
    /* Level 1 */
    .dropdown-level-1 {
        position: absolute;
        padding: 0;
        margin: 0;
        display: none;
        background: grey;
        width: 150px;
    }
    .dropdown-level-1 li {

    }
    /* The ">" triggers the direct child to show up as "block" */
    .dropdown-menu li:hover > .dropdown-level-1 {
        display: block;
    }
    /* Level 2 */
    .dropdown-level-2 {
        position: absolute;
        display: none;
        background: #888888;
        padding: 0;
        margin: -38px 0 0 148px;
    }
    /* same trick here for level 2 */
    .dropdown-level-1 li:hover > .dropdown-level-2 {
        display: block;
    }
    /* Target all links at once */
    .dropdown-level-0 li a:link,
    .dropdown-level-0 li a:visited,
    .dropdown-level-1 li a:link,
    .dropdown-level-1 li a:visited,
    .dropdown-level-2 li a:link,
    .dropdown-level-2 li a:visited {
        padding: 10px;
        color: purple;
        display: block;
    }
    .dropdown-level-0 li a:hover,
    .dropdown-level-0 li a:focus,
    .dropdown-level-1 li a:hover,
    .dropdown-level-1 li a:focus,
    .dropdown-level-2 li a:hover,
    .dropdown-level-2 li a:focus {
        color: orange;
    }
</style>
</head>
<body>
<div class="nav">
<ul class="dropdown-menu">
    <li><a href="#">Item 1</a></li>
    <li class="dropdown"><a href="#">Item 2</a>
        <ul class="dropdown-level-1">
            <li><a href="#">Item 2 sub 2</a>
                <ul class="dropdown-level-2">
                    <li><a href="#">Item 2 sub 1</a></li>
                    <li><a href="#">Item 2 sub 1</a></li>
                    <li><a href="#">Item 2 sub 2</a></li>
                </ul>
            </li>
            <li><a href="#">Item 2 sub 2</a>
                <ul class="dropdown-level-2">
                    <li><a href="#">Item 2 sub 1</a></li>
                    <li><a href="#">Item 2 sub 1</a></li>
                    <li><a href="#">Item 2 sub 2</a></li>
                </ul>
            </li>
            <li><a href="#">Item 2 sub 2</a>
                <ul class="dropdown-level-2">
                    <li><a href="#">Item 2 sub 1</a></li>
                    <li><a href="#">Item 2 sub 1</a></li>
                    <li><a href="#">Item 2 sub 2</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li class="dropdown"><a href="#">Item 2</a>
        <ul class="dropdown-level-1">
            <li><a href="#">Item 2 sub 1</a></li>
            <li><a href="#">Item 2 sub 1</a></li>
            <li><a href="#">Item 2 sub 2</a>
                <ul class="dropdown-level-2">
                    <li><a href="#">Item 2 sub 1</a></li>
                    <li><a href="#">Item 2 sub 1</a></li>
                    <li><a href="#">Item 2 sub 2</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li class="dropdown"><a href="#">Item 2</a>
        <ul class="dropdown-level-1">
            <li><a href="#">Item 2 sub 1</a></li>
            <li><a href="#">Item 2 sub 1</a></li>
            <li><a href="#">Item 2 sub 2</a>
                <ul class="dropdown-level-2">
                    <li><a href="#">Item 2 sub 1</a></li>
                    <li><a href="#">Item 2 sub 1</a></li>
                    <li><a href="#">Item 2 sub 2</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li class="dropdown"><a href="#">Item 2</a>
        <ul class="dropdown-level-1">
            <li><a href="#">Item 2 sub 1</a></li>
            <li><a href="#">Item 2 sub 1</a></li>
            <li><a href="#"> Item 2 sub 2</a></li>
        </ul>
    </li>
</ul>
</div>
</body>
</html>

为什么我的下拉菜单无法在资源管理器上运行？

0 个答案: