Hi guys, i'm trying to create a navigation bar for my new site which change the color status when its hovered, but the way i'm using it only changes the <a> background color, i'd like to change the whole background color for the whole <li> tag, which is a common effect nowadays......any advice?

//code

<html>
<head>
<script type="text/javascript">
</script>

<style type="text/css">
body{background-color: #cccc77; margin: 0; padding: 0;}
#container{border: 2px solid gold; width: 400px; height: 350px; margin: 20px auto;}
#menu{height: 30px; width: 398px; border: 1px solid #6666cc; margin: 0px auto;}
#menu ul{margin: 0; padding: 0;}
#menu li{list-style-type: none; margin-left: 50px; display: inline;}
#menu a{text-decoration: none; color: #5555cc; font-family: verdana;}
#menu a:hover{text-decoration: none; background-color: red; color: yellow;}
</style>
</head>
<body>
<div id="container">
<div id="menu">
<ul>
<li><a href="#">Menu</a></li>
<li><a href="#">Viaggi</a></li>
<li><a href="#">Destinations</a></li>
</ul>
</div>
</div>
</body>
</html>