.menu ul li a { color: black; float: left; text-decoration: none; padding: 10px ; letter-spacing: 1px; background:#eee; border:1px solid #ddd; -webkit-transition: 0.35s ease-in-out; } .menu:hover li a { filter: alpha(opacity=97); -moz-opacity:0.97; opacity:0.97; color: #ddd; } .menu li a:hover { color: black; filter: alpha(opacity=100); -moz-opacity:1; opacity:1; } .menu li a:active { position: relative; top: 2px; }
<nav class="menu"> <ul> <li><a href="javascript:void(0);">TOP</a></li> <li><a href="javascript:void(0);">MENU</a></li> <li><a href="javascript:void(0);">PRICE</a></li> <li><a href="javascript:void(0);">ABOUT</a></li> <li><a href="javascript:void(0);">CONTACT</a></li> </ul> </nav>