Dropdown as menu item with dropdown menu that appears clicking on arrow instead of whole item

[smartm0use]

Hello,
I'm looking for a dropdown that can show menu if users click on the arrow icon, instead of the whole element.

I need something like this:

applied to dropdown that is an item in a header menu: https://jsfiddle.net/brnet9a2/

How to have it?

[lubber-de]

You can use two menu items, so only the dropdown arrow is an item itself. However, to avoid the "fake" menu entry being used some little css has to be setup to ignore pointer events (you could also use disabled item, but this would display the item in light grey, which is probably not desired in your usecase
See https://jsfiddle.net/lubber/9xz2qkhf/6/

[smartm0use]

It is not a matter of pointer on the menu entry because I still need it to go to the "father" section.
Anyway your solution does not suit my case, that arrow it is not attached to menu entry, it is too far.

Look: https://jsfiddle.net/ov0pwafL

Other ideas?

[lubber-de]

Add padding-right:0 to the readonly item
See https://jsfiddle.net/lubber/19df3wpL/

[smartm0use]

Thank you, but unfortunately it is not what I'm looking for.
I need the same effect of that "save" button I attached to my first message, with menu that appears under the whole item, not only under the arrow.

It seems that having a menu item with arrow and dropdown menu it is a missing feature of Fomantic-UI dropdowns...