```css
/* assets/css/news-category-dropdown.css */

.ust-category-dropdown {
    position: relative;
    clear: both;
    width: 100%;
}

.ust-category-dropdown__menu,
.ust-category-dropdown__panel {
    padding: 0;
    margin: 0;
    list-style: none;
}

.ust-category-dropdown__menu {
    display: flex;
    align-items: stretch;
    gap: 15px;
    background: #fff;
}

.ust-category-dropdown__item--parent {
    position: relative;
}

.ust-category-dropdown__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 60px;
    padding: 0 20px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #222;
    font: inherit;
    font-size: 16px;
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
    transition:
        background-color 160ms ease,
        color 160ms ease;
}

.ust-category-dropdown__toggle:hover,
.ust-category-dropdown__toggle:focus-visible,
.ust-category-dropdown__item--parent.is-open
    > .ust-category-dropdown__toggle {
    background: rgba(0, 10, 30, 0.1);
    color: #222;
}

.ust-category-dropdown__toggle:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -4px;
}

.ust-category-dropdown__icon {
    display: block;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
    transition: transform 160ms ease;
}

.ust-category-dropdown__item--parent.is-open
    > .ust-category-dropdown__toggle
    .ust-category-dropdown__icon {
    transform: rotate(180deg);
}

.ust-category-dropdown__panel {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    z-index: 1000;
    width: 350px;
    padding: 10px 0;
    border: 1px solid #ccc;
    border-radius: 3px;
    background: #fff;
    box-shadow:
        0 10px 25px rgba(0, 10, 30, 0.14);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);

    transition:
        opacity 160ms ease,
        transform 160ms ease,
        visibility 0s linear 160ms;
}

.ust-category-dropdown__item--parent.is-open
    > .ust-category-dropdown__panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);

    transition:
        opacity 160ms ease,
        transform 160ms ease,
        visibility 0s;
}

.ust-category-dropdown__panel .menu-item {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #f1f1f1;
}

.ust-category-dropdown__panel .menu-item:last-child {
    border-bottom: 0;
}

.ust-category-dropdown__panel a {
    display: block;
    padding: 9px 20px;
    background: #fff;
    color: rgb(0, 10, 30);
    font-size: 15px;
    line-height: 23px;
    text-decoration: none;
    transition:
        background-color 160ms ease,
        color 160ms ease;
}

.ust-category-dropdown__panel a:hover,
.ust-category-dropdown__panel a:focus-visible {
    background: rgba(0, 10, 30, 0.1);
    color: #222;
}

.ust-category-dropdown__panel a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -3px;
}

/*
 * Align the last dropdown to the right to reduce viewport overflow.
 */
.ust-category-dropdown__item--parent:last-child
    > .ust-category-dropdown__panel {
    right: auto;
    left: 0;
}

@media (max-width: 600px) {
    .ust-category-dropdown__menu {
        gap: 0;
    }

    .ust-category-dropdown__item--parent {
        flex: 1 1 50%;
        min-width: 0;
    }

    .ust-category-dropdown__toggle {
        width: 100%;
        padding-right: 14px;
        padding-left: 14px;
    }

    .ust-category-dropdown__panel {
        width: min(
            350px,
            calc(100vw - 30px)
        );
    }
}

@media (prefers-reduced-motion: reduce) {
    .ust-category-dropdown__toggle,
    .ust-category-dropdown__icon,
    .ust-category-dropdown__panel,
    .ust-category-dropdown__panel a {
        transition: none;
    }
}
```

```javascript
// assets/js/news-category-dropdown.js

(function () {
    'use strict';

    const navigations = document.querySelectorAll(
        '.ust-category-dropdown'
    );

    navigations.forEach(function (navigation) {
        const toggles = Array.from(
            navigation.querySelectorAll(
                '.ust-category-dropdown__toggle'
            )
        );

        if (!toggles.length) {
            return;
        }

        function getParentItem(toggle) {
            return toggle.closest(
                '.ust-category-dropdown__item--parent'
            );
        }

        function closeToggle(
            toggle,
            restoreFocus
        ) {
            const item = getParentItem(toggle);

            if (!item) {
                return;
            }

            item.classList.remove('is-open');
            toggle.setAttribute(
                'aria-expanded',
                'false'
            );

            if (restoreFocus) {
                toggle.focus();
            }
        }

        function closeAll(
            exceptToggle,
            restoreFocus
        ) {
            toggles.forEach(function (toggle) {
                if (toggle === exceptToggle) {
                    return;
                }

                closeToggle(
                    toggle,
                    Boolean(restoreFocus)
                );
            });
        }

        function openToggle(toggle) {
            const item = getParentItem(toggle);

            if (!item) {
                return;
            }

            closeAll(toggle, false);

            item.classList.add('is-open');
            toggle.setAttribute(
                'aria-expanded',
                'true'
            );
        }

        toggles.forEach(function (toggle) {
            toggle.addEventListener(
                'click',
                function (event) {
                    event.stopPropagation();

                    const isOpen =
                        toggle.getAttribute(
                            'aria-expanded'
                        ) === 'true';

                    if (isOpen) {
                        closeToggle(toggle, false);
                    } else {
                        openToggle(toggle);
                    }
                }
            );

            toggle.addEventListener(
                'keydown',
                function (event) {
                    if (event.key === 'Escape') {
                        closeToggle(toggle, true);
                        return;
                    }

                    if (event.key !== 'ArrowDown') {
                        return;
                    }

                    event.preventDefault();
                    openToggle(toggle);

                    const item =
                        getParentItem(toggle);

                    const firstLink = item
                        ? item.querySelector(
                            '.ust-category-dropdown__panel a'
                        )
                        : null;

                    if (firstLink) {
                        firstLink.focus();
                    }
                }
            );

            const item = getParentItem(toggle);

            const panel = item
                ? item.querySelector(
                    '.ust-category-dropdown__panel'
                )
                : null;

            if (panel) {
                panel.addEventListener(
                    'keydown',
                    function (event) {
                        if (event.key !== 'Escape') {
                            return;
                        }

                        event.preventDefault();
                        closeToggle(toggle, true);
                    }
                );
            }
        });

        document.addEventListener(
            'click',
            function (event) {
                if (
                    !navigation.contains(event.target)
                ) {
                    closeAll(null, false);
                }
            }
        );

        window.addEventListener(
            'blur',
            function () {
                closeAll(null, false);
            }
        );
    });
})();
```
