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;
}
سؤال
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.
المحلول 2
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;
}
نصائح أخرى
Replace your :
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
With:
border-radius: 0 0 10px 10px;