Navigation Dropdown-Menü responsive für alle Media-Queries

25.05.2021 20:50

Philoo
#1

Hallo,

nach langem Tüffteln habe ich ein Dropdown-Menü erstellen können.
Allerdings sieht das Menü auf einem Tablet (iPad) im Hochformat und einem Handy (iPhone) im Querformat total ungeordnet aus. Die einzelnen Elemente werden nicht mehr untereinander sondern teilweise nebeneinander dargestellt.
Leider wird mir bei Jimdo auf der mobilen Ansicht alles richtig dargestellt, in Wirklichkeit ist dies aber nicht der Fall.

Hat jemand einen Tipp, wie ich per CSS auch für diesen @media-Sektor die Menüs geordnet darstellen kann, so wie im Hochformat auf dem Handy?

Besten Dank.

URL: htttps://dbsreck.jimdofree.com/

Folgende Codes habe ich für das Menü erstellt. Schießt da mir da irgendetwas in die Quere???

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
 
<style type="text/css">
/*<![CDATA[*/
.jtpl-mobile-navigation {
    top: 100px;
    box-shadow: 0 0 30px 
}
 /*]]>*/
</style>
 

<style type="text/css">
/*<![CDATA[*/
    .jtpl-mobile-navigation > div:nth-child(1) > div:nth-child(1) > ul:nth-child(1) > li:nth-child(2) > a:nth-child(1)
    .navigation-colors--transparency a, .navigation-colors--transparency a:link, .navigation-colors--transparency a:visited {
    color: #000;
}
 /*]]>*/
</style>
 

<style type="text/css">
/*<![CDATA[*/
@media (min-width:768px) {
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
 
ul li {
  display: block;
  position: relative;
  float: left;
}
 /*]]>*/
</style>
 

<style type="text/css">
/*<![CDATA[*/
@media (min-width:768px) {
li ul { display: none; }
 
ul li a {
  display: block;
  padding: 1em;
  text-decoration: none;
  white-space: nowrap;
}
ul li a:hover 
 /*]]>*/
</style>
 

<style type="text/css">
/*<![CDATA[*/
@media (min-width:768px) {
li:hover > ul {
  display: block;
  position: absolute;
}
 
li:hover li { float: none; }
 
li:hover a 
 
li:hover li a:hover 
 
.main-navigation li ul li { border-top: 0; }
 /*]]>*/
</style>
 

<style type="text/css">
/*<![CDATA[*/
@media (min-width:768px) {
ul ul ul {
  left: 100%;
  top: 0;
}
 /*]]>*/
</style>
 

<style>
/* <![CDATA[ */
 @media (min-width:1000px) {
      .cc-nav-level-0 a:link, .cc-nav-level-0 a:visited {margin-right: 3px !important;}
 
.cc-nav-level-1 a:link, .cc-nav-level-1 a:visited {width: 20.5rem !important; margin: 5px !important; padding: 4px 10px !important;}
 
     .cc-nav-level-1 a:link, .cc-nav-level-1 a:visited {width: 20.5rem !important; margin: 5px !important; padding: 15px 15px !important;}
 /*]]>*/
</style>
 

<style>
/* <![CDATA[ */
@media only screen and (device-width: 768px) {
.jtpl-navigation .j-nav-level-0 {
        max-width: 1280px;
        margin: 0 auto;
        padding: 0 90px;
}
}
/*]]>*/
</style>
 
 