0

I have this html code:

<div class="dropdown">
    <button></button>
    <menu></menu>
</div>

On button click dropdown (element "menu") shows. This dropdown have "position: absolute". All my page conditionally limited to container, and nothing should be outside this container, including dropdown. Can i without JavaScript make it so that dropdown be on center relatively to button, but not go outside the container?

Here my css:

:root {
    --size-container: 1140px;
    --size-container-col: calc(var(--size-container) / 12);
    --size-container-padding: calc((100vw - var(--size-container)) / 2);
}

.dropdown {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.dropdown > menu {
    position: absolute;
    right: var(--size-container-padding)
    margin-top: 90px;
    border: 2px solid #aaaaaa;
    visibility: hidden;
    opacity: 0;
    z-index: 9;
    background-color: #ffffff;
    transform: translateY(-60px);
    transition-property: opacity, transform, box-shadow;
}
.dropdown > menu:before {
    content: "";
    position: absolute;
    top: -17px;
    width: 30px;
    height: 30px;
    border: solid #aaaaaa;
    border-width: 2px 0 0 2px;
    z-index: -1;
    background-color: #ffffff;
    transform: translateX(-50%) rotate(45deg);
}

Here my code result

If i remove "right" property on ".dropdown > menu"

Ikor Jefocur
  • 121
  • 4
  • One possible solution is to attach the arrow to the trigger element (the button) instead and show it when your dropdown is opened. Although the arrow will not be centered with the dropdown menu it will keep your dropdown menu inside the container. – Guruwanabe Jul 21 '19 at 08:22
  • @Guruwanabe, If i understood correctly, i need to place arrow like ":after" element of a button, not a ":before" element of dropdown. But i don't understood, how it will help solve the problem. If i just remove this arrow, it will give me the same effect. – Ikor Jefocur Jul 21 '19 at 09:29
  • Can you please provide the html and css for the whole section. Tried this approach but i'm working semi blind :) https://jsfiddle.net/cb48ynLk/ – Guruwanabe Jul 22 '19 at 09:47

0 Answers0