nicht angemeldet
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;
}
Matthias Apsel
Marc