Question

我正在使用Foundation 5并尝试为每个下拉菜单提供顶部导航圆角底部。

我最接近成功的是当我尝试这个时：

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;
  }
}

这让我看到了圆角，但是在它下面有一个未接地的方形背景。我不知道它来自哪里，所以我不知道还有什么可以尝试（我已经尝试了很多其他的变化）。

这是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>

感谢您的帮助。

Answer 1

替换你的：

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

使用：

border-radius: 0 0 10px 10px;

Answer 2

通过删除ul上的边框并将其他所有内容移动到锚元素中来修复它：

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

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

}

如何在Foundation 5 Nav中添加圆角底角

2 个答案: