Exemple de sous-menu

by toubia95

HTML

<nav class="wks">
    <ul>
        <li><a href="">Item 1</a></li>
        <li><a href="">Item 2</a></li>
        <li class="active"><a href="">Item 3</a></li>
            <ul>
                <li><a href="">SubItem 1</a></li>
                <li class="active"><a href="">SubItem 2</a></li>
                    <ul>
                        <li><a href="">SubsubItem 1</a></li>
                        <li class="active"><a href="">SubsubItem 2</a></li>
                        <li><a href="">SubsubItem 3</a></li>
                    </ul>
                <li><a href="">SubItem 3</a></li>
            </ul>
        <li><a href="">Item 4</a></li>
    </ul>
</nav>

CSS

.wks a {
    text-decoration : none;
    color: #9CF;
}

.wks li.active a {
    color: #09F;
}

.wks ul {
    padding-left: 0;
    list-style-type: none;
    font-size: 16px;
}

.wks ul li {
    border-bottom: 1px solid transparent;
}

.wks ul ul li, .wks ul ul ul li {
    border-bottom: none;
}

.wks ul li:hover {
    border-bottom: 1px solid #EEE;
    color: #09F;
}

.wks ul li:hover a {
    color: #09F;
}

.wks ul ul li:hover, .wks ul ul ul li:hover,
.wks ul ul li.active, .wks ul ul li.active {
    border-bottom: none;
}

.wks ul li.active {
    border-bottom: 1px solid #09F;
}

.wks ul li a, .wks ul ul li.active a {
    padding-left: 5px;
}

.wks ul ul {
    padding-left: 14px;
    font-size: 14px;
    margin-bottom: 2px;
}

.wks ul ul ul {
    font-size: 12px;
    margin-bottom: 2px;
}

.wks ul ul li:before {
    content:"\203A";
    color: transparent;
}

.wks ul ul ul li:before {
    content:"\00BB";
    color: transparent;
}

.wks ul ul li:hover:before, .wks ul ul ul li:hover:before {
    color: #DDD;
}

.wks ul ul li.active:before, .wks ul ul ul li.active:before {
    color: #09F;
}