hover состояние: перед формой в неупорядоченном списке

Question

У меня есть неупорядоченный список. и я создал квадратную форму как форму до формы. Но я пытаюсь изменить его цвет, не завися от текста этого <li> результатов пока нет, никаких предложений? благодаря!

HTML

<nav class="menu-vertical"> 
     <ul> 
      <li><a href="">NEWS</a></li> 
      <li><a href="">REVIEWS</a></li> 
      <li><a href="">MAGAZINE</a></li> 
      <li><a href="">PODCAST</a></li> 
     </ul> 
</nav> 

CSS

.menu-vertical ul { 
list-style-type: none; 
margin-left: 20px; 
margin-right: 20px; 
padding: 0; 
width: auto; 
background-color: #f1f1f1; 
font-family: 'Open Sans', sans-serif; 
} 

.menu-vertical ul li { 
list-style: none; 
} 

.menu-vertical ul li:before { 
content:""; 
width: 10px; 
height: 10px; 
vertical-align:middle; 
background-color: fuchsia; 
position: absolute; 
margin-top:6px; 
transition: background-color 0.2s ease-in-out; 
transition: text-decoration 0.2s ease-in-out; 

} 

.menu-vertical ul li a { 
display: block; 
color: #000; 
padding-left: 20px; 
padding-bottom: 10px; 
text-decoration: none; 
font-size: 14px; 
transition: color 0.2s ease-in-out; 
} 

.menu-vertical ul li a:hover { 
color: #36b3d5; 
text-decoration: underline; 
} 

Я пытался сделать это:

.menu-vertical ul li:before a:hover но не получилось :(

Answer 1

Попробуйте это:

.menu-vertical ul li:hover:before { background-color: red; } 

See this fiddle

Answer 2

Вы должны добавить еще одно правило CSS:

.menu-vertical ul li:hover:before { 
    background-color: #36b3d5; 
}