Как применить класс .active к текущему перемещению по анимированному меню на css3?

Question

[Вячеслав Лебедев]

Добрый вечер!

Начал разбираться в анимации меню на чистом css, и столкнулся с некрасивой проблемкой. При переходе по меню анимация возвращается на начальную позицию. Так вот, как бы так сделать, чтобы не возвращалось?
Заранее огромное спасибо!
ps: хочется без js научиться такое делать :)

Вот html:

<section>
            <nav id="active">
                <ul><li class="active"><a href="/main">Главная</a></li><li><a href="/portfolio">Портфолио</a></li><li><a href="/404">404</a></li><li class="slide"></li></ul>
            </nav>
        </section>

Вот код css:

a {
    color: #33f;
    text-decoration: none;
}

a:hover {
    color: #900;
    text-decoration: none;
}

section {
    width: 95%;
    margin: 20px 0;
}

section a {
    text-decoration: none;
    color: #464646;
}

section a:hover {
    text-decoration: none;
    color: #fff;
}

section a, #active li {
    transition: all 0.5s ease-in-out;
}

section nav {
    border: 1px solid #aaa;
    margin: 0 auto;
}

section ul {
    list-style: none;
    position: relative;
    text-align: center;
}

section li {
    display: inline-block;
    width: 33.33%;
    vertical-align: middle;
}

section a {
    font-size: 16px;
    display: block;
}

section ul:hover li.active a {
    color:#464646;
}

section .active a, section ul:hover li.active a:hover {
    color: #fff;
}

.slide {
    background-color: #444;
    height: 100%;
    position: absolute;
    width: 33.33%;
    z-index: -1;
}

#active .active:nth-child(1) ~ li.slide,
#active li:hover:nth-child(1) ~ li.slide {
    left: 0;
}

#active .active:nth-child(2) ~ li.slide,
#active li:hover:nth-child(2) ~ li.slide {
    left: 33.33%;
}

#active .active:nth-child(3) ~ li.slide,
#active li:hover:nth-child(3) ~ li.slide {
    left: 66.66%;
}

Answer 1

[Евгений Низамиев]

cssdeck.com/labs/ytcahkk1

обратите внимание на атрибут tabindex="0" и к :focus примененному к этому диву.

Answer 2

[Юрий Лобанов]

Не делайте такое на чистом css. Как и нельзя в меню полагаться на один лишь хавер.