Radio Button Selector CSS ONLY pls

Question

I have created a css image slider with radio buttons to control it. I have set the radio buttons to visibility: hidden and am using thumbnail images for the labels. The html looks something like this :

<div class="slider">
<input type="radio" value="navy" id="colour" name="attribute_colour" >
<label for="navy">
<img src="uploads/navy.png">
</label> 

repeat lines 2-5 for other thumbnails, then :

<div class="slidermain"><ul>
<li>
<img src="uploads/navyfullsize.png">
</li>

repeat lines 2-4 for main images and close with :

</ul></div></div>`

I want clicking the image for navy.png to move the <ul> containing navyfullsize.png down 100%, so I would have thought that to select the button/image for navy.png, you should write this into the stylesheet :

.slider input[type=radio]:checked + label[for=navy]~.slidermain>ul  
{ top:-100%; }

But to no avail! I've tried a number of similar alternatives, I don't know anything about jquery, so the css solution would be very helpful please.

Answer 1

1) Positioning an element requires either position: relative or position: absolute
2) Using percentage values requires the parent container's height to be set (for one 200px)
3) The label for attribute references the input id, not the value

Give it a try.