<nav class="navigation-bar">
    <ul>
        <li class="whole-note"><button>C</button></li>
        <li class="half-note"><button>#</button></li>
        <li class="whole-note"><button>D</button></li>
        <li class="half-note" aria-selected="true"><button>#</button></li>
        <li class="whole-note"><button>E</button></li>
        <li class="whole-note"><button>F</button></li>
        <li class="half-note"><button>#</button></li>
        <li class="whole-note"><button>G</button></li>
        <li class="half-note"><button>#</button></li>
        <li class="whole-note"><button>A</button></li>
        <li class="half-note"><button>#</button></li>
        <li class="whole-note"><button>B</button></li>
    </ul>
</nav>
* {
    margin: 0;
    padding: 0;
}

:root {
  --color: #000;
  --contrastColor: #fff;
}

body {
  margin: 16px;
}

nav.navigation-bar {
    ul {
        display: flex;
        list-style: none;
        height: 48px;
        border: 1.5px solid var(--color);
        border-radius: 24px;
        box-sizing: border-box;
        overflow: hidden;

        li {
            flex-grow: 2;

            &.half-note {
                flex-grow: 1;
            }

            button {
                width: 100%;
                height: 100%;
                border: none;
                background: transparent;
                color: var(--color);

                &:hover {
                    background: rgba(0, 0, 0, 0.1);
                    cursor: pointer;
                }
            }

            &[aria-selected="true"] button {
                background: var(--color);
                color: var(--contrastColor);
            }

            &.whole-note:has(+ .half-note[aria-selected="true"]) button {
                background: var(--color);
                color: var(--contrastColor);
            }
            &.whole-note:has(+ li.half-note button:hover) button {
                background: rgba(0, 0, 0, 0.1);
            }
        }
    }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.