html - CSS 文本装饰 :none; doesn't work

Question

所以我在网上阅读了一个关于 flexbox 的教程并尝试制作一个下拉菜单。但唯一不起作用的是 text-decoration:none 根本没有效果？我必须使用 color#fff 使文本变白吗？

还有为什么我需要使用+号而我不能在显示下拉菜单时使用>号？

header {
  display: flex;
  width: 100%;
  z-index;
  1000;
  background: linear-gradient(to left, rgba(54, 194, 182, 0.96) 0, rgba(62, 188, 207, 0.96) 100%);
  border-bottom: 1px solid rgba(0, 0, 0, .1);
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .1);
}
header nav ul {
  list-style: none;
  margin 0;
  padding 0;
  display: flex;
  justify-content: start;
}
header nav ul li {
  position: relative;
  flex: 0 1 auto;
}
header nav ul li:hover {
  background: rgba(58, 162, 173, 1);
}
header nav ul li a {
  align-items: flex-start;
  display: flex;
  font-size: 1.55rem;
  font-weight: 200px;
  letter-spacing: 1px;
  max-width: 130px;
  padding: 1rem 1.5rem;
  text-decoration: none;
}
header nav ul li a + ul {
  border-radius: 0 0 2px 2px;
  display: none;
  font-size: 1rem;
  position: absolute;
  width: 195px;
  background: linear-gradient(to bottom, rgba(58, 162, 173, 1) 0, rgba(62, 188, 207, 0.96) 100%);
  ;
}
header nav ul li:hover a + ul {
  display: block;
}

<header>
  <nav role="navigation">
    <ul>
      <li>
        <a href="/">
              Home
            </a>
      </li>
      <li>
        <a href="/blog">
              Blog
            </a>
        <ul>
          <li><a href="#">Me</a>
          </li>
          <li><a href="#">Gaming</a>
          </li>
          <li><a href="#">Sport</a>
          </li>
          <li><a href="#">Web Design</a>
          </li>
          <li><a href="#">Web Development</a>
          </li>
        </ul>

      </li>
      <li>
        <a href="/contact">      
                Contact      
            </a>
      </li>
      <li>
        <a href="/forum">
                Forum
            </a>
      </li>
    </ul>
  </nav>
</header>

Answer 1

text-decoration 不改变颜色，它移除 anchor 下划线

需要直接兄弟选择器 + 因为目标元素不是 a 元素的子元素，它是兄弟

所以当你使用这样的规则时，你需要 +

header nav ul li:hover a + ul {
  display: block;
}

但是如果你这样改变它你可以使用>

header nav ul li:hover > ul {
  display: block;
}