Hallo zusammen,
folgendes Problem auf
Oldtimer und Motorrad Club (OMC) Mering: Startseite
Horizontales/vertikales Menü, welches sich responsiv an die Auflösung anpasst. Dabei treten folgende Probleme auf:
1.
Wenn das vertikale Untermenü ausklappt, überdeckt dieses nicht etwaige andere Menübestandteile Beispiel:
http://www.omc-mering.de/images/webs...usgeklappt.jpg
Dadurch sind die Einträge nicht lesbar.
2. Wenn das Menü wie gewollt ab einer bestimmten Auflösung komplett vertikal dargestellt wird, können die ausklappenden Punkte der Untermenüs nicht mehr angewählt werden. Auch überdecken die untermenüpunkte wieder nicht den Hintergrund. Beispiel:
http://www.omc-mering.de/images/webs...anz_schmal.jpg
Verhalten ist bei allen Browsern gleich: IE, FF, Chrome, Android, Blackberry
Da ich schon einiges hin und und her geschmissen habe, sehe ich wahrscheinlich den Wald vor lauter Bäumen nicht. Könnt ihr mal draufschauen und mir den richtigen Weg weisen?
Danke
HTML:
HTML-Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 5.0 Transitional//EN">
<html>
<head>
<title>Oldtimer und Motorrad Club (OMC) Mering: Startseite</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
...
<link rel="stylesheet" href="/css/version2.css" type="text/css"/>
</head>
<body alink="#999999" background="http://www.omc-mering.de/images/back.jpg" bgcolor="#000000" link="#999999" text="#eeeeee" vlink="#999999">
<div id="welcome">
<table border="0" width="99%">
<tbody>
<tr>
<td colspan="3" align="center" width="80%">
<img src="http://www.omc-mering.de/images/logo_trans_280.gif" width="300">
</td>
<td class="text" align="center" width="20%">
Wir sind<br>
<a href="http://www.avd.de" target="avd">
<img src="http://www.omc-mering.de/images/avd_koop.gif" border="0" width="125">
</a>
<br>
Korporativclub<BR><br>
...
</td>
</tr>
<tr>
<td colspan="2" width="50%">Nächster Stammtisch:<BR>19.10.2015 19:00<BR>Offener Stammtisch für jedermann<BR>Kirchenwirt Mering</td>
<td colspan="2" width="50%">
<table>
<tr>
<td>Unser Oldtimertreffen<BR>05.08.2016<BR><BR>Mering</td>
<td><a href="show_info_db.php?inh_id=126" target=""><img src="data:image/png;base64" width="100px" alt=""/></a></td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<div class="nav-open">
<a href="#nav" title="Menü anzeigen">Navigation anzeigen ↓</a>
</div>
<div id="nav" style="text-align: justify;">
<ul>
<li><a href="logged_on_home_resp.php" title="Hauptseite">Home</a></li>
<li><a href="mem_mitgl.php">Unsere Mitglieder</a></li>
<li class="submenu"><a href="#News">Veranstaltungen / News</a>
<ul>
<li><a href="show_terms_db.php">Kalender</a></li>
<li><a href="inhalt_edit.php?Art=News/Termin">Termin anlegen</a></li>
<li><a href="inhalt_edit.php?Art=Tagesordnung">Tagesordnung anlegen</a></li>
<li><a href="inhalt_edit.php?Art=Info">Infoseite anlegen</a></li>
</ul>
</li>
<li>
<a href="direktinfo.php?inh_id=90">Clubheim</a>
</li>
<li><a href="../mitglied_neu_db.php?inh_id=97">Mitglied werden?</a></li>
<li class="submenu"><a href="#Chronik" title="Unsere Chronik">Chronik</a>
<ul>
<li class="submenu"><a href="#Alphabetisch">Alphabetisch</a>
<ul>
<li class="submenu"><a class="jahr" href="#1">1</a>
<ul>
<li><a href="show_chronik_db.php?inh_id=119" target="crinhalt">10 Jahre Schlepperfreunde Kissing</a></li>
</ul>
</li>
...
</ul>
</li>
<li class="submenu"><a href="#Chronologisch">Chronologisch</a>
<ul>
<li class="submenu"><a class="jahr" href="#2015">2015</a>
<ul>
<li><a href="show_chronik_db.php?inh_id=124" target="crinhalt">Benfitzkonzert beim Kirchenwirt</a></li>
...
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="submenu"><a href="#Ansichtssachen">Ansichts-Sachen</a>
<ul>
<li><a class="jahr" href="#Bedienungsanleitung">Bedienungsanleitung</a>
<ul>
<li><a href="show_ansicht_pdf.php?inh_id=1" target="crinhalt">Bedienungsanleitung Magirus Deutz Mercur 150</a></li>
</ul>
</li>
<li><a class="jahr" href="#Fun">Fun</a>
<ul>
<li><a href="show_ansicht_db.php?inh_id=77" target="crinhalt">Armes Deutschland</a></li>
</ul>
</li>
</ul>
</li>
...
<li class="close">
<a href="#header">↑ Navigation ausblenden</a>
</li>
</ul>
</div>
</body>
</html>
CSS:
Code:
.nav-open {
display: none;
}
#nav {
position: fixed;
top: 0px;
float: none;
width: 100%;
margin: 20px auto;
background: #333;
font-family: Arial, sans-serif;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 0 5px #888;
-moz-box-shadow: 0 0 5px #888;
box-shadow: 0 0 5px #888;
}
#nav ul {
margin: 0;
padding: 0;
list-style: none;
}
#nav ul li {
position: relative;
float: left;
}
#nav ul li.close {
display: none;
}
#nav ul li a {
padding: 10px 15px;
display: block;
color: #fff;
text-decoration: none;
}
#nav ul li a:hover {
background: #111;
color: #aaa;
}
#nav ul > li.submenu > a:after {
position: relative;
float: right;
content: '';
margin-left: 10px;
margin-top: 5px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #fff;
border-bottom: 5px solid transparent;
}
#nav ul ul li.submenu > a:after {
margin-left: auto;
margin-right: -10px;
border-left: 5px solid #fff;
border-right: 5px solid transparent;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
}
#nav ul li:hover {
background: #4096ee;
}
#nav ul ul {
position: absolute;
top: -9999px;
left: -9999px;
background: #333;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}
#nav ul ul li {
float: none;
width: 200px;
border-bottom: 1px solid #555;
}
#nav ul ul li a {
padding: 10px 20px;
}
#nav ul ul li:last-child {
border-bottom: none;
}
#nav ul li:hover > ul {
top: 100%;
left: 0;
}
#nav ul ul li:hover > ul {
top: 0;
left: 200px;
}
@media screen and (max-width: 800px) {
.nav-open {
position: fixed;
top: 0;
left: 0;
background: #333;
font-family: Arial, sans-serif;
display: block;
width: 100%;
}
.nav-open a {
padding: 10px 15px;
display: block;
color: #fff;
text-align: center;
text-decoration: none;
}
#nav {
position: absolute;
top: -200%;
left: 0;
float: center;
width: 100%;
margin: 0;
padding: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
#nav:target {
top: 0;
}
#nav ul li {
float: none;
text-align: center;
border-bottom: 1px solid #555;
}
#nav ul li.close {
display: block;
}
#nav ul li:last-child {
border-bottom: none;
}
}
#welcome{ font-size:14px; font-family:Verdana; position:relative; font-weight:normal; color:#005FA9;left:20px; top:60px; }