Сделать кружок списка с фоном при наведении на ссылку

[nikki4]

При наведении на пункт меню нужно, чтобы кружок становился так же с фоном с ссылкой:

http://joxi.ru/4AkkNXoFyD0yyA

пробовал вместо li a, делать структуру a li

но тогда вообще пропадает кружок:

http://joxi.ru/vAWNQEKc1ZB1d2

 

придумал способ, просто вставить span с кружком, но как ему задать стили, чтобы был по центру?

когда задаю ему фонтсайз, то он поверху становится

http://joxi.ru/Drl1JxocvDGKJm

Придумал!

top: 20px;
position: relative;

 

Но конечно это костыль.

Может можно сделать чтобы к li применялся фон и цвет при наведении на li a?

 

Edited November 8, 2018 by nikki4

[AlexZaw]

22 часа назад, nikki4 сказал:

Может можно сделать чтобы к li применялся фон и цвет при наведении на li a?

Либо использовать js, либо ждать когда будет поддерживаться CSS selectors level 4.

А вообще, повесьте hover на элементы <li> , а не <a>