CSS: blur effect on menu items

by gabrieleromanato

HTML

<nav id="menu" role="navigation">
    <ul>
        <li><a href="#">Item One</a></li>
        <li><a href="#">Item Two</a></li>
        <li><a href="#">Item Three</a></li>
        <li><a href="#">Item Four</a></li>
        <li><a href="#">Item Five</a></li>
    </ul>
</nav>

CSS

#menu {
    margin: 1em;
}
#menu ul li { 
    display: inline; 
}
#menu ul li a {
    color: #000;
    text-decoration: none;
    padding: 10px 25px;
    letter-spacing: 1px;
    -moz-transition: all 500ms ease-in;
    -webkit-transition: all 500ms ease-in;
    -o-transition: all 500ms ease-in;
    -ms-transition: all 500ms ease-in;
     transition: all 500ms ease-in;
}

#menu li a:hover {
    color: #000;
    text-shadow: 1px 1px 20px #333;
}