Why doesn't :hover affect another element in this example? - css

Question

I'm trying to make a navbar with menu links on mobile that appears when you tap on the menu button. So, I decided to use :hover CSS events to make them appear.
In this example (or this demo, :hover is used to make other elements visible, and it works fine.
Without all the other containers (<nav>, and other <li> elements outside of #item and #menu), the code works fine. However, when I implement it into my current structure, it stops working; ...:hover ~ ... fails to work, while ...:hover still works (being that ... are the rule names).
body {
font-family: sans-serif;
margin: 0px;
width: 100%;
}
nav {
background-color: black;
position: fixed;
width: 100%;
height: 196px;
font-size: 64px;
padding-top: 0px;
z-index: 5;
}
nav ul {
color: white;
-webkit-padding-start: 32px;
width: calc(100% - 32px);
}
nav ul li {
display: block;
float: left;
height: 18px;
padding-top: 8px;
}
nav ul li#title {
min-width: 80%;
font-weight: bold;
}
nav ul li#menu {
width: 100px;
height: 100px;
color: white;
display: block;
}
nav ul li#menu:hover {
color: red !important;
}
nav ul li#menu:hover ~ nav ul li#item {
color: red !important;
visibility: visible !important;
}
nav ul li#item.first {
margin-top: 32px;
}
nav ul li#item {
background-color: rgba(255, 255, 255, 0.5);
margin-left: -32px;
height: 96px;
padding: 16px;
color: black;
display: block;
width: 100%;
visibility: hidden;
}
nav ul li#item:hover {
background-color: rgba(255, 0, 0, 0.5);
text-decoration: underline;
}
a {
color: black;
text-decoration: none;
width: 100%;
}
a#menu {
color: white !important;
}
a:hover {
color: blue;
}
a:visited {
color: black;
text-decoration: none;
}
a#menu:visited {
color: white !important;
}
a:active {
color: red;
text-decoration: none;
}
<nav>
<ul>
<li id="title">aytimothy's Website</li>
<a href="javascript:;">
<li id="menu"><i class="fa fa-bars" aria-hidden="true">=</i></li>
</a>
<a href="/blog">
<li id="item" class="first item">Blog</li>
</a>
<a href="/forum">
<li id="item" class="item">Forum</li>
</a>
<a href="/portfolio">
<li id="item" class="item">Portfolio</li>
</a>
<a href="/support">
<li id="item" class="item">Support</li>
</a>
</ul>
</nav>
Intended Behaviour
Mousing over the equal sign (placeholder for the menu sign) will make itself and everything in the li#item elements red (for testing), and that the hidden elements (li#item) actually shows up (`nav ul li#menu:hover ~ nav ul li#item).
The background should turn transparent red when the user hovers over.
Unintended Behaviour
Hovering over the = sign only turns it red.

Answer 1

There are a few errors with your code:
Your html is incorrect - fix this by putting your anchors inside your lis
IDs must be unique - remove the multiple ids
Your css selector is completely wrong - you want to show any sibling li after the hovered one - you cannot fully qualify the bit after the sibling selector otherwise you are saying any nav siblings after the li, just change the bit after the tilda to match the li
body {
font-family: sans-serif;
margin: 0px;
width: 100%;
}
nav {
background-color: black;
position: fixed;
width: 100%;
height: 196px;
font-size: 64px;
padding-top: 0px;
z-index: 5;
}
nav ul {
color: white;
-webkit-padding-start: 32px;
width: calc(100% - 32px);
}
nav ul li {
display: block;
float: left;
height: 18px;
padding-top: 8px;
}
nav ul li#title {
min-width: 80%;
font-weight: bold;
}
nav ul li#menu {
width: 100px;
height: 100px;
color: white;
display: block;
}
nav ul li#menu:hover {
color: red !important;
}
nav ul li#menu:hover ~ li.item { /* target the class and use only li part after tilda */
color: red !important;
visibility: visible !important;
}
nav ul li#item.first {
margin-top: 32px;
}
nav ul li.item { /* target class instead of id */
background-color: rgba(255, 255, 255, 0.5);
margin-left: -32px;
height: 96px;
padding: 16px;
color: black;
display: block;
width: 100%;
visibility: hidden;
}
nav ul li.item:hover {
background-color: rgba(255, 0, 0, 0.5);
text-decoration: underline;
}
a {
color: black;
text-decoration: none;
width: 100%;
}
a#menu {
color: white !important;
}
a:hover {
color: blue;
}
a:visited {
color: black;
text-decoration: none;
}
a#menu:visited {
color: white !important;
}
a:active {
color: red;
text-decoration: none;
}
<nav>
<ul>
<li id="title">aytimothy's Website</li>
<li id="menu"><i class="fa fa-bars" aria-hidden="true">=</i></li>
<li class="first item">Blog</li>
<li class="item">Forum</li>
<li class="item">Portfolio</li>
<li class="item">Support</li>
</ul>
</nav>