Infinity menu

Pro Máru co neumí css

by Michal Vodicka

HTML

<div class="mymenu">
    <ul>
        <li>menu1
            <ul>
                <li>menu2
                    <ul>
                        <li>menu3
                            <ul>
                                <li>menu4</li>
                                <li>menu4</li>
                                <li>menu4</li>
                                <li>menu4</li>
                            </ul>
                        </li>
                        <li>menu3</li>
                        <li>menu3</li>
                        <li>menu3</li>
                    </ul>
                </li>
                <li>menu2</li>
                <li>menu2</li>
                <li>menu2</li>
            </ul>
        </li>
        <li>menu1</li>
        <li>menu1</li>
        <li>menu1</li>
    </ul>
</div>

CSS

div.mymenu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    list-style-position: inside;
}
div.mymenu ul li {
    float: left;
    display: block;
    width: 100px;
    text-align: center;
    padding: 5px;
    border: solid 1px #999;
    background: #888 linear-gradient(to bottom, #999, #777);
    position: relative;
}
div.mymenu ul li:hover {
    cursor: pointer;
    background: #999 linear-gradient(to bottom, #AAA, #888);
}
div.mymenu li ul {
    display: none;
    width: 100px;
    position: absolute;
    right: -90px;
    top: 0;
    z-index: 1;
}
div.mymenu > ul > li > ul {
    right: auto;
    top: auto;
    left: -1px;
}
div.mymenu li ul li {
    border: solid 1px #666;
    background: none;
    background-color: #EEE;
}
div.mymenu li ul li:hover {
    background: none;
    background-color: #FFF;
}
div.mymenu li:hover > ul {
    display: block;
}