nicht angemeldet
Aufklappmenü mit mehreren Menüzeilen
0 
Matthias Apsel
0 
Marc
Aufklappmenü mit mehreren Menüzeilen
Hallo,
ich möchte mit Aufklappmenüs arbeiten - allerdings auf der obersten (stets sichtbaren Ebene) mit einer zweizeiligen Menüleiste.
Bei mouse-over über die erste Menüzeile soll ja das Untermenü aufklappen - das tut es auch, allerdings wird die zweite Zeile des Hauptmenüs dann nicht überdeckt. Das Untermenü wird also nicht ganz sichtbar.
Mein Ziel ist es, dass das aufgeklappte Untermenü die Menüpunkte des Hauptmenüs überdeckt.
Was mache ich falsch? Sind die Farben falsch gesetzt? Geht das überhaupt in CSS umzusetzen?
Ich bin für jeden Hinweis dankbar.
viele Grüße,
mick4711
Hier das html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"><title></title>
<link rel="stylesheet" type="text/css" href="formate.css"></head><body>
<p></p>
</div>
<p></p>
<div id="mainBox">
<div style="background-color: white;" class="ro">
<div class="lo">
<div class="ru">
<div class="lu">
<div class="inhalt">
<table style="text-align: left; width: 100%; height: 80%;" border="0" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top; width: 277px;"><br>
</td>
<td style="vertical-align: top; width: 677px; color: rgb(102, 102, 102);">
<div style="top: 10px; left: 500px;" id="menu">
<ul>
<li class="topmenu">
<a href="">Oberpunkt1</a>
<ul>
<li class="submenu"><a href="">Unterpunkt 1.1</a><br>
<li class="submenu"><a href="">Unterpunkt 1.2</a><br>
<li class="submenu"><a href="">Unterpunkt 1.3</a><br>
</li>
</ul>
</li>
<li class="topmenu">
<a href="">Oberpunkt2</a>
<ul>
<li class="submenu"><a href="">Unterpunkt 2.1</a><br>
<li class="submenu"><a href="">Unterpunkt 2.2</a><br>
<li class="submenu"><a href="">Unterpunkt 2.3</a><br>
</li>
</ul>
</li>
<li class="topmenu">
<a href=""> Oberpunkt3</a>
<ul>
<li class="submenu"><a href="">Unterpunkt 3.1</a><br>
<li class="submenu"><a href="">Unterpunkt 3.2</a><br>
<li class="submenu"><a href="">Unterpunkt 3.3</a><br>
</li>
</ul>
</li>
<li class="topmenu">
<a href="">Oberpunkt4</a>
<ul>
<li class="submenu"><a href="">Unterpunkt 4.1</a><br>
<li class="submenu"><a href="">Unterpunkt 4.2</a><br>
<li class="submenu"><a href="">Unterpunkt 4.3</a><br>
</li>
</ul>
</li>
</ul>
</div>
<div class="clear"></div>
</td>
</tr>
<tr>
<td>
<div style="top: 50px; left: 500px;" id="menu">
<ul>
<li class="topmenu">
<a href="">Oberpunkt5</a>
<ul>
<li class="submenu"><a href="">Unterpunkt 5.1</a><br>
<li class="submenu"><a href="">Unterpunkt 5.2</a><br>
<li class="submenu"><a href="">Unterpunkt 5.3</a><br>
</li>
</ul>
</li>
<li class="topmenu">
<a href="">Oberpunkt6</a>
<ul>
<li class="submenu"><a href="">Unterpunkt 6.1</a><br>
<li class="submenu"><a href="">Unterpunkt 6.2</a><br>
<li class="submenu"><a href="">Unterpunkt 6.3</a><br>
</li>
</ul>
</li>
<li class="topmenu">
<a href="">Oberpunkt7</a>
<ul>
<li class="submenu"><a href="">Unterpunkt 7.1</a><br>
<li class="submenu"><a href="">Unterpunkt 7.2</a><br>
<li class="submenu"><a href="">Unterpunkt 7.3</a><br>
</li>
</ul>
</li>
<li class="topmenu">
<a href="">Oberpunkt8</a>
<ul>
<li class="submenu"><a href="">Unterpunkt 8.1</a><br>
<li class="submenu"><a href="">Unterpunkt 8.2</a><br>
<li class="submenu"><a href="">Unterpunkt 8.3</a><br>
</li>
</ul>
</li>
</ul>
</div>
<div class="clear"></div>
</td>
</tr>
</tbody>
</table>
</div>
</div></div></div></div></div>
</body></html>
Hier die formate.css:
body {
font-size: 10px;
font-family: verdana;
text-align: left;
margin: 0;
padding: 0;
background-color: rgb(242, 148, 0);
}
div#mainBox
{
width:960px;
height: 100%;
overflow: visible;
margin: 0px auto;
text-align: left;
border: 0px;
background-color: white;
}
div#mainBox2
{
width:960px;
height: 100%;
overflow: visible;
margin: 0px auto;
text-align: left;
border: 0px;
background-color: white;
}
div.clear
{
clear: both;
height: 0;
font-size: 0;
margin: 0;
padding: 0;
}
/* hier beginnt das für das Aufklappmenü Box relevante CSS */
#menu {
font-size:18px;
margin-left:225px;
margin-top: 15px;
position:absolute;
background-color:rgb(255,255,255);
}
#menu ul {
list-style-type:none;
list-style-image:none;
margin:0px;
padding:0px;
}
#menu li.topmenu {
float:left;
}
.topmenu a {
float:left;
width:170px;
text-align:left;
}
.topmenu ul{
display:none;
}
.topmenu a, .submenu a{
padding:1px 3px;
border:1px solid rgb(255,255,255);
border-collapse:collapse;
color: rgb(105,105,105);
text-decoration:none;
background-color:rgb(255,255,255);
margin:0;
}
.submenu a{
font-size:15px;
margin-top:3px;
width:170px;
position:relative;
clear:both; /* special IE6 */
}
#menu a:hover, .topmenu.on a {
color:rgb(102,102,102);
background-color:#ffddbb !important;
}
.topmenu:hover ul {
display:block;
z-index:500;
}
-
Om nah hoo pez nyeetz, mick4711!
entsorge zunächst die Tabelle und alle überflüssigen (für einen Rahmen gedachten?) div-Elemente.
ebenso sämtliche Inline-Stile-Angaben
ebenso die überflüssigen Klassen topmenu und submenu. Die entsprechenden Elemente sind beispielsweise (entsprechendes HTML vorausgesetzt) selektierbar über
#nav li /* alle Listenelemente innerhalb eines Elementes mit der ID nav */ #nav > ul > li /* nur die der ersten Ebene */Matthias
--
1/z ist kein Blatt Papier.
-
Hallo,
erstens: man, muss nciht alles selber machen. Dafür gibt es fertige Lösungen im Web.
zweitens: es geht mit CSS ist aber kaum bedienbar: kaum rutscht man nur einen pixel weit aus dem zu überfahrenden bereich, schon ist der Kontext verändert und das gewünschte Untermenü futsch - sehr blöd für den Nutzer.
Per JavaScript sollte man wenigstens hier mit einer kurzen Verzögerung arbeiten.
Da bei Dir noch Defizite in Bezug auf die korrekte Verwendung von Elementen und eine ausgeprägte Divitis diagnostiziert wurden, würde ich Dir folgenden medizinisch gut gemeinten Rat geben: suche nach einer der zahllosen bestehenden Lösung und sieh Dir mal an, wie die gemacht wurden. Die Suchmaschine Deiner Wahl wird Dir reichlich Medikamente liefern! :-)
Viele Grüße,
Marc.