Create a dropdown menu with arrow pointer in SASS - html

Question

I want to know how can I implement dropdown menu with arrow pointer in CSS (SASS).
The idea is simple:
1) menu dropdown on press on left or right button
2) dropdown always centred and takes 85% of screen width (please refer screenshot http://joxi.ru/12MpgxpI4y8olm).
3) only the arrow should point 1 or 2 when clicking the respective button.
Here is where problems came:
1) I use absolutely positioned dropdown window (and the arrow too therefore) and all his parents up to the action button itself have position: static (this is required to have a dropdown window always aligned to the left side of a screen and take a % of screen's width)
2) Arrow starts to be positioned against screen size - instead of being positioned against her grandparent - action button. Arrow starts posing against button only if I remove position: static from button, but in this case I've lost dropdown taking full-screen with and aligned to left corder of a screen (it starts to show up against button).
I've tried to do some implementation with flexbox / clearfix, but it seems doesn't work with static elements. Or I misunderstood the idea.
So, my questions are:
1) How I can build a dropdown with arrow pointer properly as I described above and showed on a screenshot? (http://joxi.ru/12MpgxpI4y8olm)
Any ideas?
2) How in CSS (SASS/SCSS) I can get grandparent's position (left, margin-left, padding-left - something like that)? Grandparent == parent of parent :)
I need to support only modern browsers, so e.g. IE before version 9 doesn't really matters to me.
Current styles look like this:
.listing-action-button
position: static
display: flex
flex-direction: row
justify-content: flex-start
.dropdown-menu
left: 5% !important
margin-top: 1.5%
width: 80% !important
float: left !important
position: absolute !important
&:before
flex-grow: 1
align-self: flex-start
position: absolute
top: -7px
left: 9px
display: inline-block
border-right: 7px solid transparent
border-bottom: 7px solid #ccc
border-left: 7px solid transparent
border-bottom-color: rgba(0, 0, 0, 0.2)
content: ''
&:after
position: absolute
top: -6px
left: 10px
display: inline-block
border-right: 6px solid transparent
border-bottom: 6px solid #ffffff
border-left: 6px solid transparent
content: ''
It's based on standard bootstrap's dropdown-menu.
flex-* stuff isn't working, you can omit it.
HAML code for buttons group and dropdown:
<...>
.col-sm-6.col-xs-12.col-sm-pull-3
.user-listing__main{ style: "margin-top: -12px;" }
.user-listing__buttons.user-listing__buttons-tablet.btn-group.btn-group-justified
.btn-group.listing-action-button.left-button{:role => "group"}
%button.btn.btn-lg.btn-default.dropdown-toggle{ type: "button", :style => "width: 100%;", data: { toggle: "dropdown" } }
Preview
%span.caret
%ul.dropdown-menu.dropdown-menu-no-border{ role: "menu" }
.menu-arrow
%li{ class: ("disabled" if disable_edit) }
%a#user-listings__make-featured{ href: edit_listing_path(token: listing.token), role: "group", type: "button", style: "width: 100%;" }
%span.glyphicon.glyphicon-pencil
= t 'user.listings.edit'
%li
%a#user-listings__launch-facebook-campaign{ href: listing_preview_path(token: listing.token), role: 'button', target: '_blank', type: 'button', style: "width: 100%;" }
%span.glyphicon.glyphicon-eye-open
= t 'user.listings.preview'
.btn-group.listing-action-button.right-button{:role => "group"}
%button.btn.btn-lg.btn-primary.btn-inverted.dropdown-toggle{ type: "button", :style => "width: 100%;", data: { toggle: "dropdown" } }
Promote
%span.caret
%ul.dropdown-menu.dropdown-menu-no-border{ role: "menu" }
.menu-arrow
%li.mark-featured{ data: {"listing-id" => listing.id} }
%a#user-listings__make-featured{ href: "#" }
%span.glyphicon.glyphicon-star{ class: ("active" if is_featured?(listing)) }
= t 'user.listings.make_featured'
%li.disabled
%a#user-listings__launch-facebook-campaign{ href: "#" }
%span.glyphicon.glyphicon-thumbs-up
Launch Facebook Campaign
<...>