如何给下拉菜单添加边框半径

Question

我无法为整个下拉菜单添加边框半径，如果我将边框半径添加到click-nav ul li上，则仅应用于列表项。 我已经将边框半径添加到.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>

- Prime

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>

Demo: http://jsfiddle.net/vp9eykne

- Bruffstar

Answer 2

当你为列表（ul）添加border-radius属性时，你将看不到任何内容。你需要添加overflow: hidden。此外，ul的默认padding-left值会给你带来问题。你需要修复它，也要添加padding-left: 0。最后，你的箭头会导致border-radius-top的问题。你需要在列表的第二个li中添加border-radius。你可以查看我的fiddle，我已经做好了。 http://jsfiddle.net/naufu5hk/3/

- ebilgin

---

最后，我建议使用http://www.cssarrowplease.com来制作箭头。可以使用容器的after、before伪元素来实现。这样，您还可以摆脱无意义的HTML。 - ebilgin

Answer 3

您的border-radius属性已经设置好了，只是没有正确显示出来。如果您查看这个代码，我已添加了半径并设置了background-color: red;。在这里，您将看到第二个

的定位以及边框半径的显示。

要解决这个问题，您可以为列表的第一个（实际上是第二个）和最后一个元素添加类或伪类。


.click-nav ul li ul li:nth-child(2) a {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.click-nav ul li ul li:last-child a {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}



这里有一个链接指向工作版本。如果你不想使用伪类，那么重写你的下拉菜单以不将顶部箭头部分放置在内部的ul中并且不需要将margin推得太远。

- RhapX

Answer 4

你的菜单是由<li>元素构成的，因此你需要为第一个和最后一个<li>元素添加边框半径。

但是您不需要向

元素添加背景（可能更容易？） 所以您需要选择菜单： 用于

元素的css选择器：

ul li:first-of-type { ... }

你需要做的是将背景添加到li元素的子元素中，代码如下：

ul li:first-of-type *:first-of-type { ... }

我们需要找到最后一个元素，而不是它的子元素：

ul li:last-of-type *:last-of-type { ... }

$(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;
}
.menu li:first-of-type *:first-of-type {
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
}
.menu li:last-of-type *:last-of-type {
  border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px
}

<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 class="menu">
        <li>
          <div class="arrow-up"></div>
          <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>

- Persijn

Answer 5

尝试使用选择器 .click-nav ul .clicker + ul li:nth-of-type(2) a 来选择紧随 .click-nav ul .clicker 元素后的第一个 li a 元素，将 border-top-left-radius 和 border-top-right-radius 设置为 6px；使用选择器 .click-nav ul .clicker + ul li:nth-last-of-type(1) a 来选择跟随 .click-nav ul .clicker 元素的最后一个 li a 元素，将 border-bottom-left-radius 和 border-bottom-right-radius 设置为 6px。请注意保留 HTML 标签和格式。

.click-nav ul .clicker + ul li:nth-of-type(2) a {
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
}

.click-nav ul .clicker + ul li:nth-last-of-type(1) a {
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 6px;
}

$(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 + ul li:nth-of-type(2) a {
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
}

.click-nav ul .clicker + ul li:nth-last-of-type(1) a {
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 6px;
}
.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>

- guest271314