The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Stuck with sub-menu

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #45319

    Hi, guys.

    I’m a little stuck with menu, I can’t make sub-menu to dissapear by CSS3, here is code

    Thanks for the help


    Hehe, gratz on getting that Pen featured :P

    I’d stick with JS as well, it can be done ‘light’, don’t need jQuery for that. I need sleep now else I’d make something for you. Maybe tomorrow if no one beats me to it.


    @jamy_za thanks for answers never heard about :target

    Hi, want to see your solution

    solve the problem


    (function() {
    var mainLinks = document.querySelectorAll(‘.main-link’),

    for (var i = 0; i < mainLinks.length; i++) {
    mainLinks.onclick = function(e) {
    // always collapse current sub-nav if there is one
    if (current) = ‘0px’;

    // get sub-nav
    var subNav = this.parentNode.querySelector(‘.sub-nav’);
    if (subNav) {
    // prevent default browser behavior
    e = e || event;
    (e.preventDefault) ? e.preventDefault() : e.returnValue = false;

    if (current == subNav)
    // same main-link clicked, unset current
    current = null;
    else {
    // another main-link clicked, open that sub-nav
    current = subNav; = ‘123px’;
    } else {
    // if there is no sub-nav, unset current
    current = null;

    You should remove the hover states to see that JS working (but leave the transitions, the JS would be a lot more complex without it). You can see that with jQuery it would be a lot easier, but you don’t really need it (I think it’s IE8+ because of querySelectorAll)


    It’s pefectly works. Thanks ))))

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.