Die Webseite passt sich am Computer perfekt der Größe an, doch am Handy bzw. Tablet ist die Seite im Topmenü-Bereich irgendwie vor allem die Breite überschritten. Doch wie passe für die mobile Ansicht an und das auch gleichzeitig für die Desktop-Version angezeigt wird?
Vielen Dank für Ihre Hilfe!
Hier die Quellcode:
Code
/** Topmenu (added multi-level support v1.1) **/
#topmenu_wrap { overflow: auto; min-width: 1160px; /* --- Gradient --- */ /* Opera */ background: #151515; /* Mozilla: */ background: -moz-linear-gradient(top, #141d29, #192839); /* Chrome, Safari:*/ background: -webkit-gradient(linear, left top, left bottom, from(#141d29), to(#192839)); /* MSIE */ filter: progid:DXImageTransform.Microsoft.Gradient( StartColorStr='#141d29', EndColorStr='#192839', GradientType=0);
}
#topmenu { width: 1100px; margin: auto; padding-left: 0px; font-family: 'Droid Sans', sans-serif; font-weight: 400; font-size: 1.2em; color: #fff;
}
#topmenu ul { float: left; padding: 0; margin: 0; list-style: none;
}
#topmenu a { display: block; color: #fff; padding-top: 20px; padding-bottom: 20px; height: 19px; padding-left: 24px; padding-right: 24px; text-decoration:none; text-transform: uppercase;
}
#topmenu a:hover,
#topmenu li.active a { color: #fff; text-decoration: none; background-color: #00adfe; /* febf00 */
}
#topmenu li:first-child { border-left: 1px solid #28374c;
}
#topmenu li { float: left; border-right: 1px solid #28374c;
}
/** Second-level lists **/
#topmenu li ul { position: absolute; font-family: 'Droid Sans', sans-serif, Helvetica, Arial; font-size: 12px; width: 172px; left: -999em; /* "display: none" not seen by screen readers */ background-color: #192839; border: 0; margin-left: -1px;
}
#topmenu li li,
#topmenu li li:first-child { border: 0; margin-bottom: -1px; /* iPhone/iPad fix */
}
#topmenu li li a { width: 172px; background-color: #192839; border: 0; padding-top: 10px; padding-bottom: 10px;
}
#topmenu li ul a { width: 172px; }
#topmenu li.active ul a:hover { color: #fff; text-decoration: none; background-color: #00adfe; /* febf00 */
}
#topmenu li.active ul a { text-decoration: none; background-color: #192839;
}
/** Level third and above **/
#topmenu li ul ul { margin: -39px 0 0 220px;
}
#topmenu li:hover ul ul, #topmenu li:hover ul ul ul, #topmenu li.sfhover ul ul, #topmenu li.sfhover ul ul ul { left: -999em;
}
#topmenu li:hover ul, #topmenu li li:hover ul, #topmenu li li li:hover ul, #topmenu li.sfhover ul, #topmenu li li.sfhover ul, #topmenu li li li.sfhover ul { /* nested under hovered items */ left: auto;
}