Подсветка меню в зависимости от секции на экране

HTML

<div class="container">
  <div class="item red"></div>
  <div class="item green"></div>
  <div class="item blue"></div>
  <ul>
    <li>Item1</li>
    <li>Item2</li>
    <li>Item3</li>
  </ul>    
</div>

CSS

* {
	margin:0;
	padding:0;
}
.container {
  display: flex;
  flex-direction: column;
  position: relative;
}

.item {
  width: 100%;
  height: 100vh;
}

.red {
	background-color: red;
}

.green {
	background-color: green;
}

.blue {
	background-color: blue;
}

ul {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 3em;
  display: flex;
  justify-content: center;
  background-color: rgba(0,0,0,.5);
  color: black;
	list-style-type: none;
}
ul li {
  line-height: 3em;
  padding: 0 2em;
}
.item:nth-child(1):hover ~ ul li:nth-child(1),
.item:nth-child(2):hover ~ ul li:nth-child(2),
.item:nth-child(3):hover ~ ul li:nth-child(3) {
  color: orange;
}