Преобразование и дополнение не работают вместе ⇐ CSS

[Anonymous]

У меня есть раскрывающееся меню, я не хочу менять его ширину. Минимальная ширина: 200 пикселей;. Но я хочу добавить отступы справа.


Также я не могу понять, как сделать так, чтобы он открывался не вправо, а влево, но основная проблема теперь с заполнением.

Код: Выделить всё

[list]

[*]
[url=#]About[/url]

[url=/foo.html]Foo[/url]
[*][url=/bar.html]Bar[/url]
[/list]

Код: Выделить всё

 nav {
width: 200px;
position: relative;
}

.nav-menu {
background-color: orange;

display: flex;
flex-direction: row;

}

.dropdown {
position: relative;
}

a[data-toggle="dropdown"] {
display: flex;
align-items: center;
background: transparent;
color: blue;
padding: 10px 15px;
border-radius: 4px;
transition: background 0.3s ease;
white-space: nowrap;
}

a[data-toggle="dropdown"]:hover {
color: black;
}

.nav-menu {
gap: 10px;
list-style-type: none;
padding: 0;
margin: 0;
align-items: center;
width: 100%;
}

.dropdown-menu {
list-style: none;
padding: 10px 15px;
margin: 0;
position: absolute;
top: 100%;
left: 0;
/* min-width: 200px; */
width: auto;
box-sizing: border-box;
background: #ffffff;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
border-radius: 6px;
overflow: hidden;
transform: scaleY(0);
transform-origin: top;
opacity: 0;
transition: transform 0.3s ease, opacity 0.3s ease;
z-index: 1000;
}

.dropdown-menu.show {
transform: scaleY(1);
opacity: 1;
}

.dropdown-menu:before {
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
clip-path: inset(0 0 0 0);
}

Код: Выделить всё

document.querySelectorAll('.dropdown').forEach((dropdown) => {
const button = dropdown.querySelector('a[data-toggle="dropdown"]');
const menu = dropdown.querySelector('.dropdown-menu');

button.addEventListener('click', (event) => {
event.preventDefault();
document.querySelectorAll('.dropdown-menu.show').forEach((openMenu) => {
if (openMenu !== menu) {
openMenu.classList.remove('show');
}
});
const buttonWidth = button.offsetWidth;
menu.style.width = `${buttonWidth}px`;
menu.classList.toggle('show');
});
});

// to close the dropdown when clicked anywhere else on the page
document.addEventListener('click', (event) => {
if (!event.target.closest('.dropdown')) {
document.querySelectorAll('.dropdown-menu.show').forEach((menu) => {
menu.classList.remove('show');
});
}
});

https://jsfiddle.net/4y0vq17m/1/
Я пытался добавить отступ справа в .dropdown-menu но это работает не так, как я ожидал.

Подробнее здесь: https://stackoverflow.com/questions/793 ... s-together