Faraz Akbari Faraz Akbari - 6 months ago 10
CSS Question

Color multiple layers of active links in dropdown navigation

How can I change my main navigation bar so that when I go to the "About", "From Internet", "By Me" dropdown lists and then hover over a second layer option both the active top link and active second link remain the same color:

Like here this example here, when you go to hyper link 4 in the last sub-option both active options are green at the same time! How can I do that in mine?



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

Your nested list needs to be changed slightly. The only valid element directly inside an unordered list <ul> is the list item element <li> and not <a>

This example is basic and made purely to demonstrate a method to colour the backgrounds.

The Background CSS

The background is applied to the list items child <a> element.

Give a background color to the direct child of the hovered list item (this will apply to all top level list items):

li:hover > a {
    background: pink;
}

Give a background to the list items link that is being hovered:

li a:hover {
    background: purple;
}

That will give you this (purple item is hovered):

Screenshot Example

Complete Example

* {
  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>

Comments