How to Add Rounded Bottom Corners to Drop Down in Foundation 5 Nav

Question

I am using Foundation 5 and trying to give each drop down menu the top nav rounded bottom corners.

The closest I have come to success is when I tried this:

nav.top-bar section.top-bar-section ul.dropdown {
  border: 1px solid $gold;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  a {
    background-color: $gold;
    background-image: none;
  }
}

This got me rounded bottom corners but there is a nonrounded square background showing below it. I'm not sure where that's coming from so I don't know what else to try (I've tried a lot of other variations on this).

Here is the HTML:

<nav class="top-bar">
  <ul class="title-area">
    <li class="name">
      <h1><%= link_to (@tour.logo ? image_tag(@tour.logo.thumb('80x60>').url) :@tour.name), tour_path(@tour) %></h1>
    </li>
     <li class="toggle-topbar menu-icon"><a href="#"><span></span></a></li>
   </ul>
   <section class="top-bar-section">
     <ul class="left">
       <li class="has-dropdown">
        <%= link_to "Tour", '#' %>
          <ul class="dropdown">
            <li><%= link_to "Home", tour_path(@tour) %></li>
            <li><%= link_to "News", "##" %></li>
            <li><%= link_to "Rules", "##" %></li>
            <li><%= link_to "Forums", "##" %></li>
            <li><%= link_to "Signup", "##" %></li>
            <li class="has-dropdown">
                <%= link_to "Seasons", "#" %>
               <ul class="dropdown">
                  <% @tour.seasons.each do |s| %>
                  <li><%= link_to s.short_name, tour_season_path(@tour, s) %></li>
                <% end %>
               </ul>
            </li>
            <li><%= link_to "Other Tours", tours_path %></li>
          </ul>
        </li>
      </ul>
      <ul class="right">
        <li></li>
      </ul>
  </section>
</nav>

Thanks for any help.

Answer 1

Fixed it by removing the border on the ul and moving everything else into the anchor element like so:

nav.top-bar section.top-bar-section ul.dropdown li:last-child a {

  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;

}

Answer 2

Replace your :

border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;

With:

border-radius: 0 0 10px 10px;