html - 在下拉导航中为多层事件链接着色

Question

如何更改我的主导航栏，以便当我转到“关于”、“来自 Internet”、“由我”下拉列表，然后将鼠标悬停在第二层选项上时，事件顶部链接和事件第二个链接保持相同的颜色:

点赞this example here ，当您转到最后一个子选项中的超链接 4 时，两个事件选项同时为绿色!我怎样才能在我的机器上做到这一点？

body {
  background: #DCDCD8;
}
h2 {
  text-align: center;
  color: #CCC;
}
a {
  display: block;
  text-decoration: none;
  width: 100%;
  height: 100%;
  color: #999;
}
/* NAVIGATION */

.navigation {
  list-style: none;
  padding: 0;
  width: 250px;
  height: 40px;
  margin: 0;
  background: #F5F5F0;
  position: relative;
  z-index: 100;
  display: inline-block;
  vertical-align: top;
  left: 5px;
  top: 0px;
}
.navigation,
.navigation a.main {
  border-radius: 4px;
}
.navigation:hover,
.navigation:hover a.main {
  border-radius: 4px 4px 0 0;
}
.navigation a.main {
  height: 40px;
  font: bold 15px/40px arial, sans-serif;
  text-align: center;
  text-decoration: none;
  color: #FFF;
  transition: 0.2s ease-in-out;
  position: relative;
  z-index: 100;
  display: inline-block;
}
.navigation li {
  width: 250px;
  height: 40px;
  background: #F7F7F7;
  font: normal 14px/40px arial, sans-serif !important;
  color: #999;
  text-align: center;
  margin: 0;
  transform-origin: 50% 0%;
  transform: perspective(350px) rotateX(-90deg);
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05);
}
.navigation li:nth-child(even) {
  background: #F5F5F5;
}
.navigation li:nth-child(odd) {
  background: #EFEFEF;
}
.navigation li.n1 {
  transition: 0.2s linear 0.8s;
}
.navigation li.n2 {
  transition: 0.2s linear 0.6s;
}
.navigation li.n3 {
  transition: 0.2s linear 0.4s;
}
.navigation li.n4 {
  transition: 0.2s linear 0.2s;
}
.navigation li.n5 {
  border-radius: 0px 0px 4px 4px;
  transition: 0.2s linear 0s;
}
.navigation:hover li {
  transform: perspective(350px) rotateX(0deg);
  transition: 0.2s linear 0s;
}
.navigation:hover .n2 {
  transition-delay: 0.2s;
}
.navigation:hover .n3 {
  transition-delay: 0.4s;
}
.navigation:hover .n4 {
  transition-delay: 0.6s;
}
.navigation:hover .n5 {
  transition-delay: 0.8s;
}
#option:hover,
#blue:hover {
  color: white;
  background-color: #19A3FF;
}
#option:active {
  color: white;
  background-color: #1c5f8d;
}
#blue:active {
  color: white;
  background-color: #1c5f8d;
}
#option {
  color: black;
}
#blue {
  color: black;
}
.navigation ul {
  display: none;
  position: relative;
  top: -40px;
  left: 250px;
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.navigation li:hover ul {
  display: block;
}
#nav {
  min-width: 1020px;
}

<div style="background:#F5F5F0;">
  <div>
    <div style="float:left; margin-top:0; left:20px;">
      <img class="buzz" src="community-activism.png" width="80" height="80" />
    </div>
    <h1 style="color:black; opacity:40;" class="shrink"><strong>&nbsp;&nbsp;Social Activism</strong></h1>
  </div>
  <br />

  <div id="nav">
    <div id="nav_wrapper" style="margin:0 auto; display:inline-block;">

    </div>
    <div>
      <ul class="navigation">
        <a class="main" href="#url" style="color:black;" id="blue">Home</a>

      </ul>
      <ul class="navigation">
        <a class="main" href="#url" style="color:black;" id="blue">About &#9660;</a>

        <li class="n1" id="selection">

          <a href="Poem-From%20Internet.html" id="option">Poems &#9658;</a>
          <ul>
            <li class="n6">
              <a href="#" id="option"> Poem From Internet </a>
            </li>
            <li class="n7">
              <a href="#" id="option"> Poem By Me </a>

            </li>
          </ul>
        </li>
        <li class="n2" id="selection">
          <a href="#" id="option"> Informational Media </a>

        </li>
        <li class="n3" id="selection">
          <a href="#" id="option"> Visual/Video </a>

        </li>
        <li class="n4" id="selection">
          <a href="#" id="option"> Photo Essay </a>
        </li>

        <li class="n5" id="selection">
          <a href="#" id="option"> Me </a>
        </li>
      </ul>

      <ul class="navigation">
        <a class="main" href="#url" style="color:black;" id="blue">From Internet &#9660; </a>

        <li class="n1" id="selection">

          <a href="Poem-From%20Internet.html" id="option">Poem</a>

        </li>
        <li class="n2" id="selection">
          <a href="#" id="option"> Informational Media </a>

        </li>
        <li class="n3" id="selection">
          <a href="#" id="option"> Visual/Video </a>

        </li>
        <li class="n4" id="selection">
          <a href="#" id="option"> Photo Essay </a>
        </li>

      </ul>
      <ul class="navigation">
        <a class="main" href="#url" style="color:black;" id="blue">By Me &#9660;</a>

        <li class="n1" id="selection">
          <a href="poem%20-%20faraz%20akbari.html" id="option">Poem</a>

        </li>
        <li class="n2" id="selection">
          <a href="#" id="option"> Informational Media </a>

        </li>
        <li class="n3" id="selection">
          <a href="#" id="option"> Visual/Video </a>

        </li>
        <li class="n4" id="selection">
          <a href="#" id="option"> Photo Essay </a>

        </li>
      </ul>
    </div>
  </div>
</div>

Answer 1

您的嵌套列表需要稍作更改。直接位于无序列表中的唯一有效元素 <ul>是列表项元素 <li>并且不是 <a>

这个例子是基本的，纯粹是为了演示给背景着色的方法。

背景 CSS

背景应用于子列表项<a>元素。

为悬停列表项的直接子级提供背景颜色(这将应用于所有顶级列表项):

li:hover > a {
    background: pink;
}

为悬停的列表项链接提供背景:

li a:hover {
    background: purple;
}

这会给你这个(紫色元素悬停):

完整示例

* {
  margin: 0;
  padding: 0;
}
body {
  font-family: arial, sans-serif;
}
a {
  text-decoration: none;
  color: #000;
  font-weight: bold;
  display: block;
  padding: 5px 10px;
}
ul {
  list-style: none;
}
ul li {
  display: inline-block;
  vertical-align: top;
}
ul li .layer li,
ul li:hover .layer .layer li {
  display: none;
}
ul li:hover .layer li,
ul li .layer li:hover .layer li {
  display: block;
}
li:hover > a {
  background: pink;
}
li a:hover {
  background: purple;
}

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Hover Me</a>
    <ul class="layer">
      <li><a href="#">Option</a></li>
      <li><a href="#">Option</a></li>
      <li><a href="#">Option</a></li>
      <li><a href="#">Hover Me</a>
        <ul class="layer">
          <li><a href="#">Option</a></li>
          <li><a href="#">Option</a></li>
          <li><a href="#">Option</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>