I am trying to implement some BASIC css onto my website - it is a simple tree type menu.
Here is the test page I have created for it: http://www.worldheritagetrip.com/1309-2/
Here is the working jsfiddle: https://jsfiddle.net/fadmrdbm/
and the code:
<ul class="collapsibleList">
<li>
<label for="mylist-node1">Click to open list 1</label>
<input type="checkbox" id="mylist-node1" />
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
<li>
<label for="mylist-node2">Click to open list 2</label>
<input type="checkbox" id="mylist-node2" />
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
</ul>
and the css:
.collapsibleList li > input + * {
display: none;
}
.collapsibleList li > input:checked + * {
display: block;
}
.collapsibleList label {
cursor: pointer;
}
I have copied the html and css EXACTLY to my wordpress page and it fails :(
Can someone spot the problem?
