uselessmind
New member
Hallo!
Ich habe Schwierigkeiten die Menüzeile vernünftig darzustellen, wenn Submenus vorhanden sind. Sie bricht dabei oft um. Nicht immer, aber oft - siehe Screenshot.
Wenn mir da jemand bitte auf die Sprünge helfen könnte, freue ich mich sehr!
Genauso, wenn jemand einen Tip hat, wie man die Darstellung in der mobilen Ansicht mit reinem CSS besser lösen könnte.
Das ganze ist Teil eines Wordpress-Themes, deshalb kann ich leider nicht ohne weiteres ein Akkordeon bestehend aus <div> - Elementen benutzen.
Vielen Dank!
P.S.:
Den kompletten HTML / CSS / und zugehörigen JS-Code bekomme ich hier leider nciht angehängt und aufgrund seiner Länge nicht gepostet. Bei Interess kann ich ihn aber als "Antwort" hier bestimmt in 3 Teilen posten.
Ich habe Schwierigkeiten die Menüzeile vernünftig darzustellen, wenn Submenus vorhanden sind. Sie bricht dabei oft um. Nicht immer, aber oft - siehe Screenshot.
Wenn mir da jemand bitte auf die Sprünge helfen könnte, freue ich mich sehr!
Genauso, wenn jemand einen Tip hat, wie man die Darstellung in der mobilen Ansicht mit reinem CSS besser lösen könnte.
Das ganze ist Teil eines Wordpress-Themes, deshalb kann ich leider nicht ohne weiteres ein Akkordeon bestehend aus <div> - Elementen benutzen.
Vielen Dank!
P.S.:
Den kompletten HTML / CSS / und zugehörigen JS-Code bekomme ich hier leider nciht angehängt und aufgrund seiner Länge nicht gepostet. Bei Interess kann ich ihn aber als "Antwort" hier bestimmt in 3 Teilen posten.
Code:
/*****************************************************************
GLOBAL for a, ul, li
*****************************************************************/
a {
text-decoration: none;
}
nav {
font-family: 'Gruppo', cursive;
}
ul {
background: darkorange; /* darkorange */
list-style: none;
margin: 0;
padding-left: 0;
}
li {
display: block;
float: left;
padding: 0.5rem;
position: relative;
text-decoration: none;
}
li a{
color: black;
cursor: pointer;
}
li a:hover {
color: goldenrod;
}
li a:focus {
color: goldenrod;
}
/***** folgendes nur für die menus! */
ul li ul {
visibility: hidden;
opacity: 0;
min-width: 7rem;
position: absolute;
transition: all 0.5s ease;
margin-top: 0.5rem;
left: 0;
display: none;
}
ul li:hover > ul,
ul li ul:hover {
background-color: goldenrod;
visibility: visible;
opacity: 1;
display: block;
}
ul li ul li {
width: 100%;
}
/********************************************************************
@media
*********************************************************************/
/*************************
MENU
*************************/
.menu-wrapper{
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 2;
grid-row-end: 3;
border-radius: 10px;
}
#menu-wrapper nav {
padding-top: 1em;
padding-right: 5em;
margin-bottom: auto;
float: right;
}
#menu-wrapper ul li ul li{
background-color: white;
width: 100%;
} /*white background of submenu-li on desktop-view */
#menu-wrapper ul li:hover ,#menu-wrapper ul li ul li:hover{
background-color: goldenrod;
}
#menu-wrapper nav a{
color: black;
font-size: 1.2em;
font-weight: bold;
}
.menu-wrapper-onscroll{
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 2;
grid-row-end: 3;
border-radius: 10px;
padding-top: px;
}
.menu-wrapper-onscroll nav {
border-radius: 0px;
padding-top: 3px;
padding-bottom: 3px;
}
.menu-wrapper-onscroll ul li:hover, .menu-wrapper-onscroll ul li ul li:hover {
background: goldenrod;
}
#menu-wrapper ul li ul li, .menu-wrapper-onscroll ul li ul li{
min-width: 5em;
border-left: 1px solid black;
border-right: 1px solid black;
}
#menu-wrapper ul li ul li:first-child, .menu-wrapper-onscroll ul li ul li:first-child {
border-top: px solid black;
}
#menu-wrapper ul li ul li:last-child, .menu-wrapper-onscroll ul li ul li:last-child {
border-bottom: 1px solid black;
}
nav.menu-mobile{
z-index: 10000;
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 2;
grid-row-end: 4;
position: absolute;
border-radius: 10px;
padding-top: 10px;
padding-bottom: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
nav.menu-mobile ul {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
}
nav.menu-mobile ul li {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
text-align: left;
list-style: none;
display: block;
text-decoration: none;
font-size: 17px;
border-radius: 0px;
}
nav.menu-mobile ul li ul li {
background-color: goldenrod;
min-width: 5em;
border-left: 1px solid black;
border-right: 1px solid black;
border-top: px solid black;
}
nav.menu-mobile ul li ul li:hover, nav.menu-mobile ul li:hover {
background-color: goldenrod;
min-width: 5em;
border-left: 1px solid black;
border-right: 1px solid black;
border-top: px solid black;
}
nav.menu-mobile ul li ul li:first-child {
border-top: 1px solid black;
}
nav.menu-mobile ul li ul li a{
color: black;
}
.onscroll {
position: fixed;
}
/* ------------------ sub-menus ------------*/
nav .sub-menu {
visibility: hidden;
height: 0;
z-index: 1000;
}
nav .sub-menu li {
display: block;
}
.ulSubMenuMarginLeft {
margin-left: 30px;
} /* set by JS, menu-button-mobile.js */