Infinity menu with clicks without js

Pro Máru co neumí css2

by Michal Vodicka

HTML

<h1>First kind, simblings dont close others</h1>
<div class="mymenu">
    <ul>
        <li><label for="m1">first level item</label><input class="helper" type="checkbox" id="m1" />
            <ul>
                <li><a href="#b">second level item</a></li>
                <li><a href="#c">second level item</a></li>
                <li><a href="#d">second level item</a></li>
            </ul>
        </li>
        <li><label for="m2">first level item</label><input class="helper" type="checkbox" id="m2" />
            <ul>
                <li><a href="#f">second level item</a></li>
                <li><a href="#g">second level item</a></li>
                <li><a href="#h">second level item</a></li>
            </ul>
        </li>
        <li><label for="m3">first level item</label><input class="helper" type="checkbox" id="m3" />
            <ul>
                <li><a href="#j">second level item</a></li>
                <li><a href="#k">second level item</a></li>
                <li><a href="#l">second level item</a></li>
            </ul>
        </li>
        <li><label for="m4">first level item</label><input class="helper" type="checkbox" id="m4" />
            <ul>
                <li><a href="#n">second level item</a></li>
                <li><a href="#o">second level item</a></li>
                <li><a href="#p">second level item</a></li>
            </ul>
        </li>
    </ul>
</div>

<h1>Second kind, simblings close others</h1>
<div class="mymenu">
    <ul>
        <li><label for="f1">first level item</label><input class="helper" type="radio" id="f1" name="f" />
            <ul>
                <li>second level item</li>
                <li>second level item</li>
                <li>second level item</li>
            </ul>
        </li>
        <li><label for="f2">first level item</label><input class="helper" type="radio" id="f2" name="f" />
            <ul>
                <li>second level item</li>
                <li>second level item</li>
          ...

CSS

body {
    font-family: Impact, Charcoal, sans-serif;
}
div.mymenu a {
    text-decoration: none;
}

div.mymenu input.helper {
    display: none;
}
div.mymenu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    list-style-position: inside;
}
div.mymenu label {
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
div.mymenu label:hover {
    color: #386189;
}
div.mymenu ul li {
    display: block;
    padding: 6px 10px;
    color: #5791CA;
    background: #FFF;
    font-weight: bold;
}

div.mymenu li ul {
    display: none;
}
div.mymenu > ul > li > ul {
    margin-left: 10px;
}
div.mymenu li ul li, div.mymenu li ul li a {
    color: #C55353;
    font-weight: normal;
}
div.mymenu li ul li:hover, div.mymenu li ul li:hover a {
    color: #E81F1F;
}

div.mymenu input.helper:checked + ul {
    display: block;
}