HTML5和CSS3下拉菜单显示错误

Question

早上好，

我仅使用html和css实现了下拉菜单，但是遇到了两个问题。

首先是菜单后面的数据仍然显示并且可以“尽管”菜单看到，但我尝试了一些诸如z-index之类的操作，但无济于事，并且不确定是否会错过任何内容吗？

第二个问题是，单击菜单栏中的链接不起作用，但是当屏幕展开并正常显示时，它们才起作用。

我创建了一个小例子来说明这个问题：index.html

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>EXAMPLE</title>
<link rel="stylesheet" href="app.css">
<link rel="stylesheet" href="menuButton.css">
</head>

<body>
<nav id="mainNavigation">
    <img src="example.png" alt="Logo">
    <div>
        <button id="expandMenuButton">
            <div class="bar1"></div>
            <div class="bar2"></div>
            <div class="bar3"></div>
        </button>
        <ul>
            <li><a href="TEST">Home</a></li>
            <li><a href="#">Articles</a></li>
            <li><a href="#">Tutorials</a></li>
            <li><a href="#">About</a></li>
        </ul>
    </div>
</nav>
<div class="pageContent">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</body>

</html>

app.css

body {
    background: #666;
    margin: 0;
    padding: 0;
}

.pageContent {
  background: #fff;
  margin: 0 20px;
  padding: 20px;
}

#mainNavigation {
    background: #999;
    width: 100%;
    height: 60px;
    display: flex;
}
#mainNavigation > img {
    height: 60px;
    width: 80px;
}
#mainNavigation > div {
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    margin-left: auto;
    justify-content: flex-end;
}
#mainNavigation > div > ul {
    padding: 0;
    margin: 0;
    display: flex;
    visibility: visible;
}
#mainNavigation > div > ul > li {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    list-style-type: none;
}
#mainNavigation > div > ul > li > a {
    text-decoration: none;
    color: #fff;
}
@media screen and (min-width:600px) {
    #mainNavigation > div {
        flex-direction: row;
    }
    #mainNavigation > div > ul {
        flex-direction: row;
        align-items: stretch;
    }
    #mainNavigation > div > button {
        display: none;
    }
}
@media screen and (max-width:600px) {
    #mainNavigation > div {
        flex-direction: column;
        justify-content: flex-end;
    }
    #mainNavigation > div > ul {
        visibility: hidden;
        display: flex;
        flex-direction: column;
    }
    #mainNavigation > div > button:focus ~ ul {
        visibility: visible;
    }
    #mainNavigation > div > ul > li {
        background: #888;
        display: flex;
        align-items: center;
        padding: 30px 15px;
        list-style-type: none;
    }
}

menuBar.css

#expandMenuButton {
  background: inherit;
  padding: 5px;
  margin: 0;
  border: none;
  min-height: 60px;
}

#expandMenuButton:focus {
  outline: none;
}
#expandMenuButton > .bar1, .bar2, .bar3 {
    width: 35px;
    height: 5px;
    background-color: #333;
    margin: 6px 0;
    margin-left: auto;
    transition: 1s;
}

/* Rotate bars on click */

#expandMenuButton:focus > .bar1 {
    transform: rotate(360deg);
}
#expandMenuButton:focus > .bar2 {
    transform: rotate(360deg);
}
#expandMenuButton:focus > .bar3 {
    transform: rotate(360deg);
}

https://plnkr.co/edit/yiFvqED51uhqpFTaQsc8?p=info

总而言之，我的主要问题是如何将所有元素隐藏在一个元素后面，以及如何仅在使用同级元素：focus css显示元素时才能单击链接。

让我知道您是否需要更多信息！

请注意，有些人不确定如何使用plunkr：

减小窗口的大小，直到菜单被隐藏，然后单击三行以打开菜单，菜单应显示如下：

Answer 1

好的，对不起，我一定很傻！

为了隐藏下拉菜单中的信息，我只需要添加z-index：1; 到UL（我想我以前将它添加到了li）。

要启用单击按钮，我需要添加：

#mainNavigation > div > ul:hover {
    display: flex;
    flex-direction: column;
}

这意味着当ul悬停在ul上时，它仍然包含在dom中，因此显示为:)

Answer 2

只是删除

#mainNavigation > div { flex-direction: column; justify-content: flex-end; }

从app.css第61行

HTML5和CSS3下拉菜单显示错误

问题描述

2 个解决方案

解决方案1
0 2016-05-04 12:43:41

解决方案2
-1 2016-05-04 08:59:09

HTML5和CSS3下拉菜单显示错误

问题描述

2 个解决方案

解决方案1 0 2016-05-04 12:43:41

解决方案2 -1 2016-05-04 08:59:09

解决方案1
0 2016-05-04 12:43:41

解决方案2
-1 2016-05-04 08:59:09