Hallo,

Ik heb het volgende probleem met een responsive menu;

https://i.gyazo.com/3771a9baf8b1ab5c0f3a7f6d26f38ef1.mp4

1. Die tussenruimte moet er niet zijn, tenzij ofc je hovered op een menu item met inhoud.
2. In het submenu komt het hoofd menu te staan, het zou mooier zijn als het hoofd menu in zijn eigen blok blijft en de submenu er gewoon onder (dus 2 aparte blokken). Later ga ik deze wat naar rechts padden maar voor nu is het even belangrijker om het werkend te krijgen.

HTML;

<div id="navigation-menu-bottom">
   <center><button class="navigation-icon">☰</button></center>
   <ul class="navigation-menu">
      <li class="active">Home</li>
      <li>Test
         <ul class="sub-menu">
            <li><a href="#">Adipiscing</a></li>
            <li><a href="#">Volutpat</a></li>
            <li><a href="#">Ligula Nullam</a></li>
            <li><a href="#">Vestibulum</a></li>
        </ul>
      </li>
      <li>Test2</li>
   </ul>   
</div> <!-- #Navigation-bottom -->

CSS;

#navigation-menu-bottom {
    float: right;
    padding: 7px 10px;
    height: 50%;
}


#navigation-menu-bottom > ul > li {
    float: left;
    list-style: none;
    padding: 5px 35px 5px 35px;
    display: inline-block;
    position: relative;
    font-size: 19px;
}


#navigation-menu-bottom li:hover .sub-menu {
    z-index: 1;
    opacity: 1;
}


#navigation-menu-bottom .navigation-icon {
    display: none;
}


.sub-menu {
    min-width: 250%;
    padding: 5px 0px;
    position: absolute;
    top: 100%;
    left: 0px;
    z-index: -1;
    opacity: 0;
    transition: opacity linear 0.15s;
    box-shadow: 0px 2px 3px rgba(0,0,0,0.2);
}


.sub-menu li {
    display: block;
    font-size: 16px;
}
.sub-menu li a {
    padding: 10px 30px;
    display: block;
    text-decoration: none;
}




@media only screen and (max-width: 780px) {
    #navigation-menu-bottom > ul {
        display: none;
        position: absolute;
        z-index: 1000;
        width: 100%;
        padding-left: 0px;
        left: 0px;
    }
    #navigation-menu-bottom button.navigation-icon {
        display: block;
    }
    #navigation-menu-bottom > ul > li {
        float: none;
        display: list-item;
        text-align: left;
    }
    #navigation-menu-bottom li:hover .sub-menu {
        z-index: 0;
        opacity: 1;
    }
    .sub-menu {
        position: inherit;
        min-width: 100%;
        padding: 0px;
    }
    .sub-menu li a {
        display: block;
    }
}

Voor het gemak heb ik het ook even online gezet, begrijp dat dat makkelijker werken is;
https://exco-software.org/test/

Ik hoop dat iemand me kan helpen, mijn kennis van HTML & CSS gaat even net niet zo ver om te zien wat hier fout gaat.

Alvast bedankt!

Citaat van FangorN

Wat je wilt is volgens mij het volgende:

Hiervoor zul je iets in CSS moeten verzinnen, waarschijnlijk iets waarbij het submenu standaard display: none heeft, en als je hovered display: block.

Nee wat ik bedoelde is;

En als je over test hovered dan wordt het ;

In het 1e screen is de display gewoon none, maar op één of andere reden reserveert hij de ruimte wel.

En zoals je in het 2e screen ook ziet, wat mijn 2e probleem is, dat het 2e blok in het 1e blok komt en niet mooi staat.

Citaat van FangorN

Dat zeg ik dus. Als je niet hovered over een list-item met een submenu moet het submenu gewoon onzichtbaar zijn, dus zoiets:

CSS

#navigation-menu-bottom ul li ul.sub-menu { display: none; }

En als je wel hovered, wel:

CSS

#navigation-menu-bottom ul li:hover ul.sub-menu { display: block; }

Weet niet of dat echt handig is voor een mobiel menu, want als je naar Test2 zweeft dan klapt je menu weer in. Eigenlijk wil je de submenu's handmatig openklikken misschien.

Weet niet precies wat je met puntje #2 bedoelt en of dit voor de mobiele of niet-mobiele navigatie is. Je zou het inspringen achterwegen kunnen laten (op mobiel is de horizontale ruimte sowieso al beperkt) en kunnen volstaan met een lichtere achtergrondkleur zodat duidelijk is dat dit een sub-onderdeel van een hogergelegen item is? En dus met eerdergenoemde handmatige uitklap-actie zodat je menu niet automatisch weer inklapt, ik denk dat je dan beide problemen hebt opgelost?

Ahja op die manier werkt dat inderdaad wel goed, maar het in/uitklappen is volgens mij inderdaad beter. Hoe zou ik dat moeten aanpakken? Zo met pijltjes ofzo.