Show/hide links with CSS based on radiobutton selection

Question

I'm trying to show/hide hyperlinks according to the currently checked radiobutton. This is working until I wrap the radiobuttons inside <ul><li> elements.

CSS

.site {
  opacity: 0;
  height: 0px;
  -moz-transition: opacity .5s ease-in-out, height .5s ease-in-out,background  .5s ease-in-out;
  -webkit-transition: opacity .5s ease-in-out, height .5s ease-in-out,background  .5s ease-in-out;
  transition: opacity .5s ease-in-out, height .5s ease-in-out,background  .5s ease-in-out;
}
input[id=rbSites]:checked ~.site {
  opacity: 1;
  height: 15px;
}

HTML

<input type="radio" id="rbSites" name="types"> 
<label for="supportCase">Sites</label>
<input type="radio" id="rbOther" name="types"> 
<label for="other">Other</label>
<div class="cell site">Link to</div>
<a class="site">SiteX</a>
<a class="site">SiteY</a>
<a class="moblie">AppX</a>

The above stops working as soon as the radiobuttons are wrapped inside <ul><li> elements, like this:

<ul>
  <li>
    <input type="radio" id="rbSites" name="types"> 
    <label for="supportCase">Sites</label>
    <input type="radio" id="rbOther" name="types"> 
    <label for="other">Other</label>
  </li>
<ul>

See jsFiddle without <ul><li> and with <ul><li>.

Answer 1

The problem is that .site is no longer a sibling, so the ~.site selector doesn't work once the radiobutton has been wrapped inside <ul><li>.

You would need an additional parent selector (to select the <ul> and then ~.site) or a method to select an element (<ul>) with a certain childelement (the checked radiobutton).

Unfortunately, I'm afraid both options will only be available in CSS4. Also, see this and this answer.