webサイトのリストのみにホバーを適応させたい

現在webサイトを作成しています。
リスト部分にマウスをカーソルした際に、リスト部分のみが透明になるようにしたいのですが、リストとリストの間にマウスをホバーすると、リストの上にマウスをホバーしたわけでもないのに透明化が適応されてしまいます。

リストの間隔は維持した状態で、リストに透明化を適応させたいです

HTML
1<!DOCTYPE html>
2<html lang="ja">
3    <head>
4        <meta charset="utf-8">
5        <title>ブランドサイト</title>
6        <link href="css/style.css" rel="stylesheet">
7    </head>
8
9	<body>
10   <header>
11    <div class=""></div>
12     <ul>
13      <li class="lo">Home</li>
14      <li class="lo">About</li>
15      <li class="lo">Product</li>
16      <li class="lo">Online Store</li>
17      <li class="lo">NEWS</li>
18     </ul>
19   </header>
20	</body>
21</html>

CSS
1ul{
2  text-align:right;
3  padding-right:500px;
4  padding-top:20px;
5}
6
7li{
8  display: inline;
9
10}
11
12.lo{
13  padding-right:30px;
14}
15
16li:hover{
17  opacity: 0.5;
18}
19
20li{cursor: pointer}