CSS :Тень не исчезает при наведении

Я сделал небольшое меню с несколькими кнопками. Я добавил тень к кнопкам меню. Это работает отлично. Хотелось бы сделать в меню некую "глубину", чтобы они действительно стали "кнопками". Это хорошо работает, если вы играете с тенями. Без каких-либо действий тень должна быть в левом верхнем углу.

#menu ul li {
    -moz-box-shadow: -3px -3px -3px #888;
    -webkit-box-shadow: -3px -3px -3px #888;
    box-shadow: -3px -3px -3px #888;
}

Но как только я навожу курсор на нее, эта тень не хочет уходить, даже когда я ухожу

#menu ul li:hover {
    border-radius: 5px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

Почему не хочет уходить?