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;
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 -->
Toon Meer
CSS;
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;
}
}
Toon Meer
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!