title: How do I remove the hover effect of menu separators?
body: <p>In my salient WordPress theme, this is the css for my menu.</p>
  
  <pre><code>header#top nav &gt; ul &gt; li &gt; a {
      font-family: Arial,sans-serif;
      text-transform: capitalize;
      letter-spacing: .5px;
      font-size: 17px;
      line-height: 23.8px;
  }
  </code></pre>
  
  <p>I have this code for menu separator "|". <strong>I want to remove the hover effect for the menu separators</strong> i.e., when I hover the mouse only menus should change the color and not the separators along with menus also.    </p>
  
  <pre><code>media="all"
  header#top nav &gt; ul &gt; li &gt; a::after {
      content: "|";
      padding-right: .8em;
      padding-left: .8em;
  }
  </code></pre>
  
  <p><strong>Edit:</strong> Adding :hover code</p>
  
  <pre><code>a:hover {
  color: inherit;
  }
  
  header#top nav ul li a:hover,
  header#top nav .sf-menu li.sfHover &gt; a,
  header#top nav .sf-menu li.current_page_ancestor &gt; a,
  header#top nav .sf-menu li.current-menu-item &gt; a,
  header#top nav .sf-menu li.current-menu-ancestor &gt; a,
  header#top nav .sf-menu li.current_page_item &gt; a {
  color: #27CFC3;
  } 
  
  .sf-menu li ul li a:hover, .sf-menu li ul li.sfHover &gt; a { 
  color: #27CFC3;
  background-color: #272727!important;    
  }
  </code></pre>