naturallucky/dinamic-menu-radio.css

## dinamic-menu-radio.css
tabs. * {
                margin: 0;
                padding: 0;
                }
            .tabs li{
                float:left;
                list-style: none;
            }
            .tabs{
                position:relative;
            }
            .tabs input[type="radio"]{
                display:none;
            }
            .tabs label{
                background: #eeaaaa;
                transition: all 0.7s;
            }
            .tabs label:hover{
                background: #ffcccc;
            }
            .tabs .content {
                position:absolute;
                top:16px;
                left:0;
                visibility: hidden;
                opacity :0.15;
                background: #ffeeee;
                transition: opacity 1s;
            }

            .tabs [id^="page"]:checked + label {
                display: block;
                background: #eeffee;
            }
            .tabs [id^="page"]:checked ~ [class^="content"] {
                visibility: visible;
                opacity:1.0;
            }

## dinamic-menu-radio.html
<ul class="tabs">
          <li>
            <input type="radio" name="tabs" id="page1" checked/>
            <label for="page1">Page1</label>
            <div class="content" id="page1">
                                    ~~~~~~~~~~<br>
                    ~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~<br>
                    AAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAA<br>
            </div>
          </li>
          <li>
            <input type="radio" name="tabs" id="page2"/>
            <label for="page2">Page2</label>
            <div  class="content" id="page2">
                     page2       aaaaaaaaaaa    ~~~~~~~~~~<br>
                    ~~~~~DDDDDDDDDDDDD~~~~ ~~~~~~OOOOOOOO<br>
                    ~~~~~~~~~~~~~<br>
                    AAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAA<br>
            </div>
          </li>
          <li>
            <input type="radio" name="tabs" id="page3"/>
            <label for="page3">Page3</label>
            <div  class="content" id="page3">
                    page3
                    AAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAA<br>
                                   ~~~~~~~~~~<br>
                    ~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~<br>
            </div>
          </li>
          <li>
            <input type="radio" name="tabs" id="page4"/>
            <label for="page4">Page4</label>
            <div  class="content" id="page4">
                         page4           ~~~~~~~~~~<br>
                    ~~~~~HHHHHHHHHHHHHH~~~~ ~~~~~~LLLLL~~~~~~~~~~~~<br>
                    AADDD  OOOOOOOOO ``````````AA<br>
            </div>
          </li>
     </ul>