<ul>
    <li><input type="checkbox"  checked="false" id="one"><span></span><label for="one">Asia</label> 
     <ul>
       <li><input type="checkbox" checked="false" id="one-one"><span></span><label for="one-one">China</label>
         <ul>
           <li><label>Beijing</label></li>
           <li><label>Shanghai</label></li>
           <li><label>Hong Kong</label></li>
         </ul>  
       </li>
       <li><input type="checkbox"  checked="false" id="one-two"><span></span><label for="one-two">Japan</label>
         <ul>
           <li><label>Tokyo</label></li>
           <li><label>Yokohama</label></li>
         </ul>  
       </li>
      </ul>
    </li>
    <li><input type="checkbox"  checked="false" id="two"><span></span><label for="two">America</label>
      <ul>
        <li><input type="checkbox"  checked="false" id="two-one"><span></span><label for="two-one">USA</label>
          <ul>
            <li><label>New York</label></li>
            <li><label>Los Angles</label></li>
            <li><label>Austin</label></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>

body {
  font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana sans-serif;
}

ul{
  list-style-type: none;
}

li > input[type=checkbox]{
  opacity: 0;
}

label{
  margin: 0.5em;
}

input[type=checkbox]:checked ~ ul{
  display: none;
}

input[type=checkbox] + span{
  margin-left: -1em;
}

input[type=checkbox] + span:before{
  content: '\25BC';
}

input[type=checkbox]:checked + span:before{
  content     : '\25B6';
}