um right tricky
The a link inherits the width from the list element which as a block is full width of the space available which means the blue applies when hovered over the list element
After spending a while looking at this I can't find a way of forcing the blue hover to only apply to the link text itself while keeping the list vertical
so try adding this
.jub-block .footer.bg-cyan ul>li:hover>a {color: rgba(255,255,255,.7) !important;}
.footer .nav.navbar-nav span:hover {color:red}
.jub-block .footer nav ul>li>a::after, .jub-block .footer nav ul>li>span::after {color:red}
I'm taking the a link back to the default link colour to override the blue - I have cheated by using important
Then I've targeted the span as that will use its parent element of the a tag rather the list element e.g. not full width of the space availabe
There may well be a better way of doing this but I can't find it 🙂
