Minimal css for clickable pure CSS collapsible tree menu

by Amir Sharifian

HTML

<ol id="menutree">
  <li>
    <label class="menu_label" for="c1">برند 1</label>
    <input type="checkbox" id="c1" />
    <ol>
        <li class="page"><a href="#">زنانه</a></li>
        <li class="page"><a href="#">مردانه</a></li>
        <li class="page"><a href="#">بچه گانه</a></li>
    </ol>
  </li>
  <li>
    <label class="menu_label" for="c2">برند 2</label>
    <input type="checkbox" id="c2" />
    <ol>
        <li class="page"><a href="#">کیف</a></li>
        <li class="page"><a href="#">کفش</a></li>
        <li class="page"><a href="#">لوازم منزل</a></li>
    </ol>
  </li>
</ol>

CSS

#menutree li {
   list-style: none;         
         }

   li .menu_label + input[type=checkbox] {
      opacity: 0; 
     }
    li .menu_label {
      cursor: pointer;        
    }                         

      li .menu_label + input[type=checkbox] + ol > li
         {
            display: none;        
         }

      li .menu_label + input[type=checkbox]:checked + ol > li
         {
           display: block;         /* display submenu on click */
         }
         body{
           direction:rtl; font-family:tahoma;
         }
         ol{
               padding-right: 10px;
         }