hover transition on div within an a tag

Question

So I have a nav that looks like this:

  <nav>
    <ul>
      <li>
        <a href="#">About</a>
        <div style="background-color: #c03546;height: 10px;"></div>
      </li>
      <li>
        <a href="#">Companies</a>
        <div style="background-color: #f26d5b;height: 10px;"></div>
      </li>
      <li>
        <a href="#">Brands</a>
        <div style="background-color: #f6ea8c;height: 10px;"></div>
      </li>
    </ul>
  </nav

I need through css only apply a style that when i hover on the it's corresponding div appears (the divs are initially NOT DISPLAYED) PLUS - I need them to appear gradually so I need to have a transition duration.

Up until now i managed to make the divs appear upon hovering on the tag but i am having trouble adding the transition duration as it doesn't seem to work

  nav {
    position: fixed;
    background-color: #fafafa;
    top: 0;
    width: 100%;
    border-bottom: 1px solid #cacaca;
  }

  nav li {
    display: inline-block;
    padding: 0 1em;
  }

  nav li a {
    color: #939393;
    font-weight: 400;
    transition-duration: 3s;
  }

  nav li div{
    display: none;
    transition-duration: 3s;
  }

  nav li a:hover +div{
    display: block;
  }

Answer 1

The display property cannot be animated.

But you could use the opacity property instead:

nav {
  position: fixed;
  background-color: #fafafa;
  top: 0;
  width: 100%;
  border-bottom: 1px solid #cacaca;
}

nav li {
  display: inline-block;
  padding: 0 1em;
}

nav li a {
  color: #939393;
  font-weight: 400;
  transition-duration: 3s;
}

nav li div{
  opacity: 0;
  transition-duration: 3s;
}

nav li a:hover +div{
  opacity: 1;
}

 <nav>
    <ul>
      <li>
        <a href="#">About</a>
        <div style="background-color: #c03546;height: 10px;"></div>
      </li>
      <li>
        <a href="#">Companies</a>
        <div style="background-color: #f26d5b;height: 10px;"></div>
      </li>
      <li>
        <a href="#">Brands</a>
        <div style="background-color: #f6ea8c;height: 10px;"></div>
      </li>
    </ul>
</nav>