Проблема отображения с ::before при использовании overflow-y: прокрутка позиции: фиксированный элемент ⇐ Html

[Anonymous]

Я создал панель навигации, в которой цветные маркеры для точек навигации расположены за пределами панели навигации.

Я создаю их с помощью ::before. Все работает нормально, пока я не сделал фиксированную панель навигации вертикально прокручиваемой с помощью overflow-y: srcoll.

Я закомментировал это, чтобы вы могли сначала увидеть, как это должно быть. если вы хотите увидеть его сломанным, прокомментируйте строку overflow-y: прокрутите страницу.
Вот HTML и CSS:

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

body {
background: #fff;
margin: 0;
padding: 0;
}

#mainbox {
background: #fff;
top: 0rem;
position:     relative;
left: 256px;
width: 14rem;
min-height: 200px;
height: 100%;
}

#pager {
width: 30rem;
margin: 0 auto;
}

#mainnavigation {
background: #fbfbfb;
width: 16rem;
bottom: 0;
top: 0;
position: fixed;
z-index: 1500;
}

#mainnavigation ul {
list-style: none;
margin: 0;
padding: 0;
top: 0;
bottom: 0;
position: fixed;
/*                       overflow-y:scroll; */
overflow-x: visible;
}

#mainnavigation ul a li {
border-bottom: 1px #fbfbfb solid;
vertical-align: middle;
}

#mainnavigation ul a li:hover {
background-color: #727272;
color: #fbfbfb;
}

#mainnavigation ul a li.autorinnen:hover {
background-color: #007aa3;
color: #fff;
}

#mainnavigation ul a li.autorinnen::before {
position: relative;
top: 0;
left: -3rem;
content: '';
width: 3rem;
height: 3rem;
background-color: #007aa3;
display: inline-block;
vertical-align: middle;
}

#mainnavigation ul a li.komponistinnen:hover {
background-color: #fb7600;
color: #fff;
}

#mainnavigation ul a li.komponistinnen::before {
position: relative;
top: 0;
left: -3rem;
content: '';
width: 3rem;
height: 3rem;
background-color: #fb7600;
display: inline-block;
vertical-align: middle;
}

#mainnavigation ul a li.malerinnen:hover {
background-color: #02174e;
color: #fff;
}

#mainnavigation ul a li.malerinnen::before {
position: relative;
top: 0;
left: -3rem;
content: '';
width: 3rem;
height: 3rem;
background-color: #02174e;
display: inline-block;
vertical-align: middle;
}

#mainnavigation ul a:link {
text-decoration: none;
color: #727272;
padding: 0.5rem 0;
}

#mainnavigation ul a:visited {
text-decoration: none;
color: #727272;
padding: 0.5rem 0;
}

#mainnavigation ul a:active {
text-decoration: none;
color: #727272;
padding: 0.5rem 0;
}

#mainnavigation ul a:hover {
text-decoration: none;
color: #fbfbfb;
padding: 0.5rem 0;
}

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

[list]
[*]   Literatur
[*]   Musik
[*]    Bildende Kunst
[/list]

Подробнее здесь: https://stackoverflow.com/questions/798 ... on-fixed-e