Hover on multiple concurrent DIVs - css

Question

I am messing around with some navigation for a site and I want three images floating on the right of the screen (which I have). I then want to be able to hover over one of the images and have a menu pop-up next to that image. I can do this with one, but as soon as I introduce the next image in the vertical sequence, the first one stops working. Why?
My HTML:
<DIV id="parent"><img src = "images/parent.png"></DIV>
<DIV id="student"><img src = "images/student.png"></DIV>
<DIV id="teacher"><img src = "images/staff.jpg"></DIV>
<DIV id="pnavi"> <img src = "images/parent.png"></DIV>
My CSS:
#parent {
width: 50px;
position: fixed;
top: 20px;
right: 0;
z-index: 1;
}
#student {
width: 50px;
position: fixed;
top: 70px;
right: 0;
z-index: 1;
}
#teacher {
width: 50px;
position: fixed;
top: 120px;
right: 0;
z-index: 1;
}
#parent:hover + #pnavi {
visibility: visible;
}
#pnavi {
position: fixed;
float: right;
width: 100px;
height: 50px;
top: 20px;
right: 0px;
z-index: 1;
visibility: hidden;
}
If I comment out the student and teacher DIV, hover on parent shows #pnavi. Remove the comment (or even add a break after the DIV) and it all stops.
Fiddle is here
I have the second two DIVs currently commented out so that the hover works (first time using Fiddle so I hope I did it right..).

Answer 1

When you use + (direct adjacent combinator), the elements on each side must be adjacent siblings. So, on your case, #pnavi must be right after #parent on the markup (and, by consequence, on the DOM).
There is also an indirect adjacent combinator, ~, that only requires the elements to be siblings, but not directly next to each other. So you might use #parent:hover ~ #pnavi. I'm not sure about browser support, though. It works in Chrome on my mac. See demo.