Hallo,
ich habe mir ein eigenes Drop Down menü per HTML /CSS erstellt. Ich habe allerdings das Problem das ich sobald ein Untermenü aufklappt dieses nicht sichtbar ist. Es liegt daran das der Rahmen für den HTML Code im Header zu klein ( nach unten) ist. Ziehe ich den Rahmen größer fängt logischerweise auch meine Hauptseite bzw. der angeklickte Link wesentlich tiefer an. Gibt es eine Möglichkeit im CSS des Menüs (oder anderes) es so zu gestallten das das Drop Down Menü über den Homepageseiten aufklappt ? Hintergrund ist, dass ich unter "Shop" ein megamenü mit 3 Spalten habe, quasi zum Auswählen der Shop Kategorien.
Falls es jemand benötigt...anbei der CSS:
CSS
- /*Hauptmenü*/
- nav {
- position: absolute;
- width: 100%;
- background: white;
- font-size: 16px;
- box-shadow: 0 0 10px rgba(0, 0, 0, 1);
- }
- /* first stage */
- nav a {
- display: block;
- color: black; /*Schrift im Hauptmenü*/
- text-decoration: none;
- }
- nav ul li {
- display: inline-block;
- color: #000;
- list-style: none;
- transition: 0.5s;
- }
- nav > ul {
- position: relativ;
- display: flex;
- text-align: center;
- justify-content: center;
- width: 800px;
- margin: 0 auto;
- padding: 0;
- }
- nav > ul > li > a {
- padding: 15px 25px;
- }
- nav ul > li.submenu > a:after {
- position: relative;
- float: right;
- content: '';
- margin-left: 10px;
- margin-top: 8px;
- border-left: 5px solid transparent;
- border-right: 5px solid transparent;
- border-top: 5px solid #fff;
- border-bottom: 5px solid transparent;
- }
- nav ul > li.submenu:hover > a:after {
- margin-top: 2px;
- border-top: 5px solid transparent;
- border-bottom: 5px solid #fff;
- }
- nav > ul > li:hover {
- background: grey;/*#4096ee;*/
- }
- /* second stage (the mega-menu) */
- nav ul.megamenu {
- position: absolute;
- display: flex;
- flex-wrap: wrap;
- width: 1200px;
- top: -9999px;
- left: 0;
- padding: 40px 40px 0 40px;
- background: #fff;
- text-align: left;
- border-top: 5px solid black;
- box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
- z-index: 1;
- }
- nav ul li:hover ul.megamenu {
- top: 100%;
- }
- /* third stage (child-menus in the mega-menu) */
- nav ul.megamenu ul {
- width: 25%;
- margin-bottom: 40px;
- color: #000;
- box-shadow: none;
- }
- nav ul.megamenu h4 {
- margin-bottom: 15px;
- text-transform: uppercase;
- }
- nav ul.megamenu ul li {
- display: block;
- }
- nav ul.megamenu ul li a {
- margin-top: 10px;
- transition: 0.5s;
- color: #000;
- }
- /*Megamenüfarbe bei Mausover*/
- nav ul.megamenu ul li a:hover {
- color: black;
- font-size:18pt;
- font-weight:bold;
- }
