html ul overflow,html - Trouble with ul overflow - Stack Overflow

Here's the problem. I have one haml page with a list that looks like this:

It's a list with elements formed by a div (left side) and an ul of buttons (right side). Here's the summarized code:

%li.rutinas-li{style: "overflow:visible"}

%div{ style: "display: inline-block;" }

= link_to ...

...

%br

%p ...

%br

%span

= ...

.thumbs-container

=link_to ...

= icon('thumbs-up', ...)

%strong ...

.thumbs-container

=link_to ...

= icon('thumbs-down', ...)

%strong ...

.thumbs-container

=link_to ...

= icon('star', ...)

%ul.pull-right.without-bullets.no-padding

%li.inline-block= link_to ...

%li.inline-block= link_to ...

%li.inline-block= link_to ...

%li.inline-block.dropdown

%a.dropdown-toggle{"data-toggle": "dropdown", type: "button"}

= icon('share-alt', ...)

%ul.dropdown-menu{style: "min-width:0"}

%li{style: "padding: 15px"}

= link_to ...

= icon('envelope', ...}

%li{style: "padding: 15px"}

= link_to ...

= icon('twitter', ...")

%li{style: "padding: 15px;"}

= link_to ...

= icon('facebook', ...)

I need the line 1 {style: "overflow:visible"} because the last ul is a dropdown that looks like this:

And if I remove it the dropdown is cropped. However, this css property causes also that when the screen is smaller ( a mobile phone, for example), the list is displayed like this:

And I would like it like this instead:

As the overflow is permitted, the list of buttons on the right are overflowing the parent and his white separators, it is kind of ugly. But if I remove {style: "overflow:visible"} the dropdown won't be visible when I click on it