Question

我正在创建一个下拉菜单，但我注意到这只适用于某些情况。当它自己隔离时，菜单可以完美地运行：

<nav class = "navigation">
                    <div class="button-wrapper">
                        <button>
                            <p>Resume</p>               
                        </button>
                        <div class="hidden">
                            <div class="menu-option">
                                <p>Download<p>
                            </div>
                            <div class="menu-option">
                                <p>
                                    <a href ="http://www.mywebsite.com/resume.html">
                                        View Online
                                    </a>
                                </p>
                            </div>  
                        </div>
                    </div>
                    <div class="button-wrapper">
                        <button>
                            <p>3D Modeling</p>              
                        </button>
                        <div class="hidden">
                            <div class="menu-option">
                                <p>Portfolio(PDF)<p>
                            </div>
                            <div class="menu-option">
                                <p>Projects</p>
                            </div>  
                        </div>
                    </div>
                    <div class="button-wrapper">
                        <button>
                            <p>Programming</p>              
                        </button>
                        <div class="hidden">
                            <div class="menu-option">
                                <p>Projects<p>
                            </div>
                            <div class="menu-option">
                                <p>Code Bits</p>
                            </div>  
                        </div>
                    </div>
                    <div class="button-wrapper">
                        <button>
                            <p>Other</p>                
                        </button>
                        <div class="hidden">
                            <div class="menu-option">
                                <p>NA<p>
                            </div>
                        </div>
                    </div>
                    <div class="button-wrapper">
                        <button>
                            <p>Contact</p>              
                        </button>
                    </div>
</nav>

的CSS：

.button-wrapper {
    color: black;
}

.hidden {
    display: none;
    margin: auto;
    width: inherit
    border: 1px solid black;
}

.hidden p {
    width: inherit;
    padding: 1px 0px 1px 10px;
    background-color: white;
}

.menu-option:hover p {
    background: #888;
}

a {
    text-decoration: none;
    color: black;
}

button {
    float: right;
        width: auto;
    height: 40px;
        padding: 10px 30px;

}

div {
    background: #555;
    margin: 0px;
    border: 0px;
    padding: 0px;

}

body, div, nav, footer {
    background: #555;
    margin: 0px;
    border: 0px;
    padding: 0px;
}

h2 {
    width: 100%;
    margin: 10px auto;
    color: white;
    text-align: center;
}

header div h1 {
    color: white;
        text-align: center;
        margin: 0px;
        padding: 11px;
        height: 100px;
}

header, .content, footer {
    width: 98%;
    margin: 1%;
    padding: 1%;
}

.button-wrapper:hover .hidden, .hidden:hover {
    display: block;
}

p {
    margin: 0px;    
}

nav {
    margin-left: auto;
  margin-top: 60px;
    display: flex;
    background: none;
}

当整个网页分开时，如果屏幕足够大，但是一旦屏幕宽度变得足够小（大约900px），当您尝试将鼠标悬停在最后一个选项上时，菜单会消失：

有什么想法让菜单无法正常运作？

Answer 1

由于button已浮动，但下拉列表不是clear，因此会产生定位问题。要解决此问题，只需将clear: both;和position: relative;添加到您的.hidden小组元素中。

示例：

.hidden {
    clear: both; // Add this line
    position: relative; // And this line
    display: none;
    margin: auto;
    width: inherit
    border: 1px solid black;
}

下拉菜单停止工作以适应较小的屏幕

1 个答案: