"dropdown menu" in "top-bar" suffers background override

[udf2457]

Hi,

This sort of thing will leave dropdown menu inheriting top-bar background colour, which is undesireable as it renders the menu content illegible.

<div class="top-bar" id="example-menu">
  <div class="top-bar-left">
    <ul class="dropdown menu" data-dropdown-menu>
      <li class="menu-text">Site Title</li>
      <li>
        <a href="#">One</a>
        <ul class="menu vertical">
          <li><a href="#">One</a></li>
          <li><a href="#">Two</a></li>
          <li><a href="#">Three</a></li>
        </ul>
      </li>
      <li><a href="#">Two</a></li>
      <li><a href="#">Three</a></li>
    </ul>
  </div>
  <div class="top-bar-right">
    <ul class="menu">
      <li><input type="search" placeholder="Search"></li>
      <li><button type="button" class="button">Search</button></li>
    </ul>
  </div>
</div>

[kball]

I believe this was deliberate, but I don't remember the reasoning and it definitely seems less than optimal.
cc @IamManchanda @rafibomb @brettsmason do you have thoughts & recommendations on the best way to handle this?

[IamManchanda]

This is like this:
https://github.com/zurb/foundation-sites/blob/develop/scss/components/_top-bar.scss#L47-L57

Here are the variables:
https://github.com/zurb/foundation-sites/blob/develop/scss/components/_top-bar.scss#L13-L19

I think we need to add more variables and logic in there? Thoughts ?

[IamManchanda]

Also (outside the topic)
#10056 (comment)