Pure CSS Menu

by Praveen Kumar Purushothaman

HTML

<ul>
    <li>
        <label for="m1">Master 1</label>
        <input type="checkbox" id="m1" />
        <ul>
            <li><a href="">Item 1</a></li>
            <li><a href="">Item 2</a></li>
            <li><a href="">Item 3</a></li>
        </ul>
    </li>
    <li>
        <label for="m2">Master 2</label>
        <input type="checkbox" id="m2" />
        <ul>
            <li><a href="">Item 1</a></li>
            <li><a href="">Item 2</a></li>
            <li><a href="">Item 3</a></li>
        </ul>
    </li>
    <li>
        <label for="m3">Master 3</label>
        <input type="checkbox" id="m3" />
        <ul>
            <li><a href="">Item 1</a></li>
            <li><a href="">Item 2</a></li>
            <li><a href="">Item 3</a></li>
        </ul>
    </li>
    <li>
        <label for="m4">Master 4</label>
        <input type="checkbox" id="m4" />
        <ul>
            <li><a href="">Item 1</a></li>
            <li><a href="">Item 2</a></li>
            <li><a href="">Item 3</a></li>
        </ul>
    </li>
    <li>
        <label for="m5">Master 5</label>
        <input type="checkbox" id="m5" />
        <ul>
            <li><a href="">Item 1</a></li>
            <li><a href="">Item 2</a></li>
            <li><a href="">Item 3</a></li>
        </ul>
    </li>
</ul>

CSS

body {font-family: Segoe UI;}
ul {list-style: none; margin: 0; padding: 0;}
ul li input {position: absolute; left: -999em;}
a, ul li label {cursor: pointer; color: #00f; text-decoration: none;}
a:hover, ul li label:hover {color: #f00;}
ul li input + ul {display: none;}
ul li input:checked + ul {display: block; margin-left: 15px;}