1:
.navi:hover ~ .block {
display: block;
}
2:
.navi:hover + .block {
display: block;
}
В чем разница между ~ и + ?

1. Правило применится, если .block находится в документе на том же уровне, что .navi
<div class="navi"></div>
<div class="other"></div>
<div class="block"></div>

2. Применится только в том случае, если .block следует сразу же за .navi
<div class="navi"></div>
<div class="block"></div>

Спасибо