How To Separate Elements Using A Divider In A Dropdown Menu?

Question

I want to separate certain elements in a dropdown menu option, with a simple solid divider. Ideally I want to have the links 'Pinterest', 'Twitter', 'Bloglovin' and 'Instagram' to appear above this divider and the link 'Email' to appear below the divider. So essentially I'm separating the first half of links from the second half with a divider.

Below is the html coding to the dropdown menu:

<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:blankesque@hotmail.com'>Email</a></li>

</ul></li>

The link to my site is as follows - http://www.blankesque.com.

Any help with this issue would be greatly appreciated. Thank you in advance.

Iram

Ummm... he's trying to add a divider in a combobox, just like he stated?? — Johnny Bones, Nov 13 '15 at 16:09
Possible duplicate of [How do I add a horizontal line in a html select control?](http://stackoverflow.com/questions/4317025/how-do-i-add-a-horizontal-line-in-a-html-select-control) — Johnny Bones, Nov 13 '15 at 16:10
@JohnnyBones not a duplicate of that question at all. He is talking about an `
@JohnnyBones They've told us what he's trying to do. They haven't told us what they tried, what's not working, etc. — ceejayoz, Nov 13 '15 at 16:24

Jacob G · Accepted Answer · 2018-03-06T18:13:09.070

Just target the last <li> in the social <li>(I added the class .social to it), with :last-of-type and add a 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:blankesque@hotmail.com">Email</a></li>
  </ul>
</li>

How To Separate Elements Using A Divider In A Dropdown Menu?

1 Answers1