title: How can I remove a border on hover in dropdown content?
body: <p>I'd like to delete a borderline in a dropdown content inhering from an &quot;active&quot; dropdown button. Currently, when the page is &quot;active&quot; (ie it's the current page), the bottom line is for both the dropdown button and the dropdown content. I want that the bottom line appears only if the dropdown content is hover. It works when the page is not active since active properties are not transferred to dropdown-content.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.tm-nav-link {
    /* color: white; */
    font-size: 1.4rem;
  }
  
  #tm-main-nav .nav-item .nav-link {
    border-bottom: 1px solid transparent;
  }
  
  #tm-main-nav .nav-item.active .nav-link,
  #tm-main-nav .nav-item:hover .nav-link:hover {
    border-bottom: 1px solid red;
    color: red;
  }
  
  
  .menulink {
    display: table;
  }
  
  .dropdown {
    position: relative;
    display: inline-block;
  }
  
  .dropdown-content {
    display: none;
    position: absolute;
    min-width: 160px;
    z-index: 1;
    transition: all 3s;
    max-height: 0;
  }
  
  .dropdown:hover .dropdown-content {
    display: inline-block
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="dropdown"&gt;
    &lt;li class="nav-item active"&gt;
      &lt;a class="nav-link tm-nav-link" href="#"&gt;Home&lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;
      &lt;div class="dropdown-content"&gt;
        &lt;a class="menulink nav-link tm-nav-link" href="#"&gt;&lt;span&gt;History&lt;/span&gt;&lt;/a&gt;
        &lt;a class="menulink nav-link tm-nav-link" href="#"&gt;&lt;span&gt;Geography/span&gt;&lt;/a&gt;
      &lt;/div&gt;
    &lt;/li&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>