如何将border-radius添加到下拉菜单中

Question

我无法在整个下拉菜单中添加border-radius,如果我将border-radius添加到click-nav ul liradius应用于列表项.我已添加border-radius .click-nav ul但半径未应用于整个下拉菜单.

$(function () {
  $('.click-nav > ul').toggleClass('no-js js');
  $('.click-nav .js ul').hide();
  $('.click-nav .js').click(function(e) {
    $('.click-nav .js ul').slideToggle(200);
    $('.clicker').toggleClass('active');
    e.stopPropagation();
  });
  $(document).click(function() {
    if ($('.click-nav .js ul').is(':visible')) {
      $('.click-nav .js ul', this).slideUp();
      $('.clicker').removeClass('active');
    }
  });
});

body{background:#000}

.click-nav {width:200px;}

.click-nav ul {position:relative;}

.click-nav ul li {position:relative;list-style:none;cursor:pointer;}

.click-nav ul li ul {position:absolute;left:0;right:0;margin:5px 0px 0px -40px;}

.arrow-up {
	width: 0; 
	height: 0; 
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-bottom: 10px solid white;
  margin-left:30px;
  }


.click-nav ul .clicker {position:relative;border:2px solid #fff;color:#fff;border-radius:6px;background-color: rgba(255,255,255,0);width:70px;}

.click-nav ul .clicker:hover,.click-nav ul .active {background-color: rgba(255,255,255,0.2);width:70px;}


.click-nav ul li a {
  background:#fff;transition:background-color 0.2s ease-in-out;
-webkit-transition:background-color 0.2s ease-in-out;
-moz-transition:background-color 0.2s ease-in-out;
  display:block;
  padding:6px 10px 6px 10px;color:#333;text-decoration:none;}

.click-nav ul li a:hover {background-color: rgba(214,247,255,1); }
.click-nav .no-js ul {display:none;}
.click-nav .no-js:hover ul {display:block;}

<script src="https://code.jquery.com/jquery-1.8.3.js"></script><div class="click-nav">
  <ul class="no-js">
    <li>
      <a href="#" class="clicker">Categories</a>
      <ul>
        <li><div class="arrow-up"></div></li>
        <li><a href="#">Dashboard</a></li>
        <li><a href="#">Settings</a></li>
        <li><a href="#">Privacy</a></li>
        <li><a href="#">Help</a></li>
        <li><a href="#">Sign out</a></li>
      </ul>
    </li>
  </ul>
</div>

Answer 1

尝试将类添加到第一个和最后一个列表元素...

CSS

.first a {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.last a{
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

HTML

  <ul>
    <li><div class="arrow-up"></div></li>
    <li class="first"><a href="#">Dashboard</a></li>
    <li><a href="#">Settings</a></li>
    <li><a href="#">Privacy</a></li>
    <li><a href="#">Help</a></li>
    <li class="last"><a href="#">Sign out</a></li>
  </ul>

演示:http://jsfiddle.net/vp9eykne