如何在下拉菜单中使用分隔符分隔元素？

Question

我想通过一个简单的实心分隔符来分隔下拉菜单选项中的某些元素。理想情况下，我希望将链接“Pinterest”，“Twitter”，“Bloglovin”和“Instagram”显示在此分隔符上方，并将“电子邮件”链接显示在分隔符下方。所以基本上我是用分隔符将下半部分的前半部分链接分开。

下面是下拉菜单中的html编码：

<li><a href='#'>Social</a>
<ul>
<li><a href='http://www.pinterest.com/blankesque'>Pinterest</a></li>
<li><a href='http://www.twitter.com/itsblankesque.com'>Twitter</a></li>
<li><a href='http://www.bloglovin.com/people/aladyinwhite-8315551'>Bloglovin</a></li>
<li><a href='http://www.instagram.com/blankesque/blankesquexo'>Instagram</a></li>
<li><a href='mailto:[email protected]'>Email</a></li>

</ul></li>

我网站的链接如下 - http://www.blankesque.com。

任何有关此问题的帮助将不胜感激。先感谢您。

愤怒

Answer 1

只是针对社交<li>中的最后一个<li>（我添加了类.social），使用:last-of-type并添加border-top

.social li:last-of-type {
  margin-top: 10px;
  border-top: 1px solid grey;
}

<li class="social"><a href="#">Social</a>
  <ul>
    <li><a href="http://www.pinterest.com/blankesque">Pinterest</a></li>
    <li><a href="http://www.twitter.com/itsblankesque.com">Twitter</a></li>
    <li><a href="http://www.bloglovin.com/people/aladyinwhite-8315551">Bloglovin</a></li>
    <li><a href="http://www.instagram.com/blankesque/blankesquexo">Instagram</a></li>
    <li><a href="mailto:[email protected]">Email</a></li>
  </ul>
</li>