html - Show/hide links with CSS based on radiobutton selection

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

• 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

  
  
  

   
  Sites
  
   
  Other
  Link to
  SiteX
  SiteY
  AppX
  

  
  
  

  The above stops working as soon as the radiobuttons are wrapped inside

  • elements, like this:
    
    
    
    

    
      
    
         
        Sites
         
        Other
      
    
    

    
    
    
    

    See jsFiddle without

    • and with
      • .