儿童元素隐藏兄弟姐妹

Question

我想看看我的菜单链接。

我使用复选框hack实现了一个CSS下拉菜单。

我在菜单底部附加了一个图标。触发后，菜单会同时拖动图标。

然而，图标＆＃34;边距＆＃34; （根据开发工具）覆盖菜单的整个宽度，这样在菜单中显示链接的唯一方法是使菜单显着降低，更改：

#navbar-checkbox:checked + .menu ul {
        max-height: 50px; ==============> 75px
        z-index: 3;
}

我已经尝试了我能想到的一切：从z-index到各种position，到transparent到opacity等。

我只想显示链接。

＆＃13;

＆＃13;

body {
  background-color: purple;
}
.menu {
  padding: 15px 15px 0px 15px;
  background: transparent;
  min-height: 2.75em;
  line-height: 0em;
  border-bottom: 1px solid white;
  position: relative;
}
.logo {
  color: white;
  transition: 0.4s ease-in-out;
}
#logo {
  background-image: url("http://www.rocstarr.com/Tipapalooza/files/tipapalooza-icon-100x100.png");
  background-repeat: no-repeat;
  background-color: transparent;
  background-size: 80%;
  display: block;
  margin-top: 35px;
  margin-bottom: -10px;
  height: 50px;
  width: 50px;
  transition: 0.4s ease-in-out;
  z-index: 2;
}
.logo:hover {
  color: mediumturquoise;
  transition: 0.4s ease;
}
.menu .logo div {
  position: absolute;
  width: 200px;
  margin-top: -20px;
}
.logo p {
  margin-left: 15px;
  margin-top: 35px;
  font-size: 20px;
  font-weight: 800;
  font-family: 'Coustard', serif;
}
.menu ul {
  font-family: 'Open Sans', sans-serif;
  color: white;
  transition: max-height 0.4s linear 0;
  margin: 0;
  padding: 0;
  text-align: right;
}
.menu a {
  text-decoration: none;
  color: white;
  transition: 0.4s ease-in-out;
}
.menu a:hover {
  color: black;
  transition: 0.4s ease-in-out;
}
.menu li {
  display: inline-block;
  padding: .45em 1.1em;
}
@media(max-width:321px){

#logo {
  margin-left: 5%;
}
}
@media (min-width: 0px) {
  .menu ul {
    max-height: 0;
    overflow: hidden;
  }
  .menu li {
    visibility: visible;
    display: inline-block;
    padding: 4em 0 0.5em;
    border: none;
    margin-right: 4px;
  }
  .menu .navbar-handle {
    display: block;
  }
  #navbar-checkbox:checked + .menu ul {
    max-height: 50px;
    z-index: 3;
  }
  #navbar-checkbox:checked + .menu li {
    visibility: visible;
  }
  #navbar-checkbox:checked + .menu .navbar-handle,
  #navbar-checkbox:checked + .menu .navbar-handle:after,
  #navbar-checkbox:checked + .menu .navbar-handle:before {
    border-color: white;
  }
}
.navbar-handle {
  display: none;
  cursor: pointer;
  position: relative;
  font-size: 45px;
  padding: .5em 0;
  height: 0;
  width: 1.6666666666666667em;
  border-top: 0.13333333333333333em solid;
}
.navbar-handle:before,
.navbar-handle:after {
  position: absolute;
  left: 0;
  right: 0;
  content: ' ';
  border-top: 0.13333333333333333em solid;
}
.navbar-handle:before {
  top: 0.37777777777777777em;
}
.navbar-handle:after {
  top: 0.8888888888888888em;
}
.menu {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.menu .navbar-handle {
  position: absolute;
  font-size: 1.2em;
  top: 1.3em;
  color: white;
  right: 25px;
  z-index: 10;
}
.navbar-checkbox {
  display: none;
}

＆＃13;

<input type="checkbox" id="navbar-checkbox" class="navbar-checkbox">
<nav class="menu">
  <a class="logo" href="http://myapp.com">
    <div class="logo">
      <p>myapp.com</p>
    </div>
  </a>
  <ul>
    <li><a href="#">how it works</a>
    </li>
    <li><a href="#">about us</a>
    </li>
    <li><a href="#">contact</a>
    </li>
  </ul>
  <p id="logo"></p>
  <label for="navbar-checkbox" class="navbar-handle"></label>
</nav>

＆＃13;

＆＃13;

＆＃13;

Answer 1

这里有更正：

将这些放在

之前

<p id="logo"></p>
<label for="navbar-checkbox" class="navbar-handle"></label>
<ul></ul>  

必须添加和编辑这些样式

#logo {float: left;}
#navbar-checkbox:checked + .menu ul {
max-height: 75px;}

我的建议：

#navbar-checkbox:checked + .menu ul {
display: block;
}

#navbar-checkbox + .menu ul {
display: none;
}

请勿使用height作为参数。

Answer 2

为了看到链接可见，只需尝试调整.menu li padding的填充：4em 0 0.6em;填充：2em 0 0.6em;