Display horizontal divider between submenu items

Hi Basilis,
Thanks for your quick reply! The URL is: http://idetox.voyage/
Wish you a nice day,
Steph.

Thanks a lot Yigit, both for the result and your quick reply!
Do you know a way to have this divider line displayed only on a portion of the bottom border (not throughout the full submenu width), as shown on the image I posted above?

Thanks in advance and wish you a great day,

Steph.

Hi Imael and thanks for your sugestion!

As this dispalys a line which is not a equal distance between 2 consecutive submenu items, I changed margin to margin-top with a value of 10px.
That helps to balance the border position but increases the height of each submenuitems … and the overall submenu height.
Visually not so aesthetic.
Then I tried the following:

ul.children > li +li:after {
content : “”;
position: absolute;
left: 15px;
bottom: 0;
height: 1px;
width: 80%;
border-bottom: 1px groove black;
}

This gives a well centered border but it does NOT show on the first (top) submenu items.
Thanks to let me know if you have any idea on how to solve this.

Best regards,
Steph.

Hi Ismael,

Thanks for the link. I’ll investigate more this option cause I was not able to get it so far.

A last path of investigation for this topic: is there a way to specify a submenu backgroud image?
For example, if I take the 2nd item of my navigation menu (.av-main-nav li.page_item.page-item-33), is there a way to apply a backgroud image on its ul.children as a whole? … Or even individually to each of its subsequent menu items (in this case li.page_item.page-item-190 and li.page_item.page-item-210)?

Thanks once more for your help,

Steph.

Hi Ismael!
I look at the nth-child selector link but was not successfull at aplying it.
I’m afraid this is beyond my limited skills.
The best I was able to do is to display a background image on a submenu item and its children with the following:
.av-main-nav li.page_item.page-item-33 ul.children a {
background-image: url(“http://idetox.voyage/wp-content/uploads/2015/10/Cadre1.png”) !important
}
But I’m not able to have it show ONLY on the 2 direct children of li.page_item.page-item-33 (li.page_item.page-item-190 and li.page_item.page-item-210), and not on their own children.
If you have bright idea, please let me know, otherwise I’ll just keep the easy/basic design without the horizontal submenu dividers as I had imagined them.
Thanks for your help and wish you a nice end of week.
Steph.