navbar - dropdown menu problem

How to solve the problem of overlap between absolute dropmenu and prevent interference between them

7 Replies

Dropdown menu style

&:has(&__dropdown) &__dropdown {
                background: white;
                border-radius: 1rem;
                padding: 2rem;
                box-shadow: 0 4px 20px 0.5px rgba(0, 0, 0, 0.05);
                min-width: max-content;
                position: absolute;
                left: -100%;
                margin-top: 1rem;
                &__item {
                    &:not(:last-child) {
                        margin-bottom: 1rem;
                    }

                    &__link {
                        color: var(--medium-gray);

                        &:has(svg) {
                            display: flex;
                            flex: 1 1;
                            align-items: center;
                            gap: 1rem;

                            svg {
                                flex-shrink: 1;
                            }
                        }
                    }
                }
            }

&:has(&__dropdown) &__dropdown {
                background: white;
                border-radius: 1rem;
                padding: 2rem;
                box-shadow: 0 4px 20px 0.5px rgba(0, 0, 0, 0.05);
                min-width: max-content;
                position: absolute;
                left: -100%;
                margin-top: 1rem;
                &__item {
                    &:not(:last-child) {
                        margin-bottom: 1rem;
                    }

                    &__link {
                        color: var(--medium-gray);

                        &:has(svg) {
                            display: flex;
                            flex: 1 1;
                            align-items: center;
                            gap: 1rem;

                            svg {
                                flex-shrink: 1;
                            }
                        }
                    }
                }
            }

croganm•10mo ago

Why have a left of -100%? Just give it a left of 0 and a width of 100% And if that's too small, you may need to find a way to limit dropdowns to one at a time... Which I can't think of right this second but I'm sure it'll come to me or someone else will know right away

T. Issam•10mo ago

There is a space between the first and second list I know that but look at active wireframe :

croganm•10mo ago

What's wrong with the space? I'm just trying to understand the solution you're after

T. Issam•10mo ago

Look at wireframe picture and my code you can see space between the first menu and secound

Chris Bolson•10mo ago

In that image the first dropdown is aligned to the right of the parent and the second is aligned to the left of it's parent, this way they don't overlap.

T. Issam•10mo ago

Oh, thank you. You are right, I did not pay attention to this detail. I have now fixed it.

Gaming

Programming

navbar - dropdown menu problem