Thu, 2020-07-30 07:30
hello, i have problems with a submenu navigation. the first level has "display: inline; float: left;" . At every menu item that contains a submenu, the line unfortunately breaks, or there are indentations that move everything. can be seen on the screenshot.
203/5000
a second problem in the mobile view is:
if two points of different levels, which both contain sub-menus, happen to overlap >> then everything starts to bounce in chrome when hovering.
can someone give me a tip? Many thanks!! (I can put in the complete code including js if necessary so that it can be tested.)
<!DOCTYPE html> <html class="no-js"> <!-- class: css-fallback angaben, falls js nicht aktiviert --> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="test.css" media="screen" /> <script src="dom-helper.js" defer="defer"></script> <script src="menu-button-mobile.js" defer="defer"></script> </head> <body > <!-- fügt abhängig von dargestellter seite unterschiedliche klassen ein, zB home-klasse auf start-seite --> <!--- sichtbarer header ---> <header id="header-wrap" class="masthead" role="banner"> <div id="header-content-wrapper" class="header-content-wrapper"> <!-- <div id="title-container" class="show"> --> <div id="title-image-container" > </div> <div id="site-titel-wrapper"> <div class="site-title"> <!--<h2 style="font-size: 1.2em, color: red;"> --> <h2 class="site-title"> </h2> </div> <div class="sub-title"> <!--<h3 style="font-size: 0.8em" class="blog-description"> --> <h3 class="sub-title"> </h3> </div> </div> <!-- site-titel-wrapper --> <!-- </div> title-container --> <div id="menu-container-mobile" class="menu-container-mobile-hide"> <nav role="navigation" class="menu-mobile"> <button class="hide-menu-btn">close</button> <ul> <li>test1</li> <li>test2</li> <li>test3</li> <li>test4</li> <li>test5</li> <li>test6</li> <li><a href="#"> test7</a> <ul class="sub-menu"> <li>testtest1</li> <li>testtest2</li> <li>testtest3</li> <li>testtest4</li> <li><a href="#"> testtest5</a> <ul class="sub-menu"> <li>subsubsub</li> <li>subsubsub2</li> <li>subsubsub3</li> <li>subsubsub4</li> <li><a href="#"> subsub5</a> <ul class="sub-menu"> <li>subsubsub11</li> <li>subsubsub22</li> <li>subsubsub33</li> <li>subsubsub44</li> <li>subsubsub55</li> <li>subsubsub66</li> </ul> </li> <li>subsubsub6</li> </ul> </li> <li>testtest6</li> </ul> </li> <li>test8</li> <li>test9</li> <li>test3</li> <li>test4</li> <li>test5</li> <li>test6</li> <li><a href="#"> test7</a> <ul class="sub-menu"> <li>testtest1</li> <li>testtest2</li> <li>testtest3</li> <li>datenschutz</li> <li><a href="#"> testtest5</a> <ul class="sub-menu"> <li><a href="#"> testtest111</a> <ul class="sub-menu"> <li>subsubsub11</li> <li><a href="#"> testtest1111</a> <ul class="sub-menu"> <li>subsubsub111</li> <li>subsubsub222</li> <li>subsubsub333</li> <li>subsubsub444</li> <li>subsubsub555</li> <li>subsubsub666</li> </ul> </li> <li>subsubsub33</li> <li>subsubsub44</li> <li>subsubsub55</li> <li>subsubsub66</li> </ul> </li> <li>subsubsub2</li> <li>subsubsub3</li> <li>subsubsub4</li> <li><a href="#"> subsub5</a> <ul class="sub-menu"> <li>subsubsub11</li> <li>subsubsub22</li> <li>subsubsub33</li> <li>subsubsub44</li> <li>subsubsub55</li> <li>subsubsub66</li> </ul> </li> <li>subsubsub6</li> </ul> </li> <li>testtest6</li> </ul> </li> <li>test8</li> <li>test9</li> <li><a href="#"> testtest5</a> <ul class="sub-menu"> <li>testtest1</li> <li>testtest2</li> <li>testtest3</li> <li>testtest4</li> <li><a href="#"> testtest5</a> <ul class="sub-menu"> <li>subsubsub</li> <li>subsubsub2</li> <li>subsubsub3</li> <li>subsubsub4</li> <li><a href="#"> subsub5</a> <ul class="sub-menu"> <li>subsubsub11</li> <li>subsubsub22</li> <li>subsubsub33</li> <li>subsubsub44</li> <li>subsubsub55</li> <li>subsubsub66</li> </ul> </li> <li>subsubsub6</li> </ul> </li> <li>testtest6</li> </ul> </li> <li>test4</li> <li>test5</li> <li>test6</li> </ul> <button class="hide-menu-btn">close</button> </nav> </div> <div class="menu-button-wrapper"> <div id="menu-button" class="show-menu menu-button"> <div class="menu-button-icon"></div> <div class="menu-button-icon"></div> <div class="menu-button-icon"></div> </div> <!-- <p class="menu-button show-menu">☰</p> --> </div> <div class="menu-container"> <div id="menu-wrapper" class="menu-wrapper"> <nav role="navigation" class="menu"> <ul> <li><a href="#"></a> test1</a></li> <li>test2</li> <li>test3</li> <li>test4</li> <li>test5</li> <li>test6</li> <li><a href="#"> test7</a> <ul class="sub-menu"> <li>testtest1</li> <li>testtest2</li> <li>testtest3</li> <li>testtest4</li> <li><a href="#"> testtest5</a> <ul class="sub-menu"> <li>subsubsub</li> <li>subsubsub2</li> <li>subsubsub3</li> <li>subsubsub4</li> <li><a href="#"> subsubsub5</a> <ul class="sub-menu"> <li>subsubsub11</li> <li>subsubsub22</li> <li>subsubsub33</li> <li>subsubsub44</li> <li>subsubsub55</li> <li>subsubsub66</li> </ul> </li> <li>subsubsub6</li> </ul> </li> <li>testtest6</li> </ul> </li> <li>test8</li> <li>test9</li> <li>test8</li> <li>test9</li> <li>test8</li> <li>test9</li> <li>test8</li> <li>test9</li> </ul> </nav> </div> </div> </div> <!-- header-content-wrapper --> </header>
/***************************************************************** 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%; } /************************* 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 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; } /* ------------------ 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 */
Attachment | Size |
---|---|
menu-verschoben.png | 107.67 KB |