nicht angemeldet
Foldoutmenü zu weit unten
Hallo,
folgendes Problem: bei dem unten stehenden Menü öffnet sich zwar das Untermenü immer schön neben dem Hauptmenü, allerdings immer einen Menüpunkt zu weit unten. Wie kann ich das hochziehen?
Danke für jede Hilfe,
Wende
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-style-type" content="text/css">
<title>Foldoutmenue Horizontal</title>
<style type="text/css" media="screen">
<!--
body
{
font-family: Verdana, sans-serif;
font-size: 12px;
overflow: auto;
padding: 10px;
margin: 0px;
}
ul, li
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
.menu
{
position: absolute;
z-index: 3;
top: 10px;
}
.menu li
{
width: 140px;
}
.menu a
{
border: 5;
background-color: #EFCC05;
text-decoration: none;
text-align: left;
font-weight: bold;
cursor: default;
margin: 0px 0px;
display: block;
height: 20px;
color: #00004A;
}
.menu a:hover
{
background-color: #FF0000;
}
#smenu1, #smenu2, #smenu3, #smenu4
{
font-size: 12px;
display: none;
width: 140px;
left: 140px;
position: absolute;
}
#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a
{
font-weight: normal;
padding-top: 2px;
border-top: 0px;
cursor: pointer;
}
//-->
</style>
<script type="text/javascript">
<!--
function montre(id)
{
with (document)
{
if (getElementById)
getElementById(id).style.display = 'block';
else if (all)
all[id].style.display = 'block';
else
layers[id].display = 'block';
}
}
function cache(id)
{
with (document)
{
if (getElementById)
getElementById(id).style.display = 'none';
else if (all)
all[id].style.display = 'none';
else
layers[id].display = 'none';
}
}
//-->
</script>
</head>
<body>
<div class="menu">
<ul>
<li><a href="javascript:void(0);" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">Menu 1</a>
<ul id="smenu1" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">
<li><a href="">Subkategorie 1.1</a></li>
<li><a href="">Subkategorie 1.2</a></li>
<li><a href="">Subkategorie 1.3</a></li>
</ul>
</li>
<li><a href="javascript:void(0);" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">Menu 2</a>
<ul id="smenu2" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">
<li><a href="">Subkategorie 2.1</a></li>
<li><a href="">Subkategorie 2.2</a></li>
</ul>
</li>
<li><a href="javascript:void(0);" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">Menu 3</a>
<ul id="smenu3" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">
<li><a href="">Subkategorie 3.1</a></li>
<li><a href="">Subkategorie 3.2</a></li>
<li><a href="">Subkategorie 3.3</a></li>
<li><a href="">Subkategorie 3.4</a></li>
<li><a href="">Subkategorie 3.5</a></li>
</ul>
</li>
<li><a href="javascript:void(0);" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">Menu 4</a>
<ul id="smenu4" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">
<li><a href="">Subkategorie 4.1</a></li>
<li><a href="">Subkategorie 4.2</a></li>
<li><a href="">Subkategorie 4.3</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
-
folgendes Problem: bei dem unten stehenden Menü öffnet sich zwar das Untermenü immer schön neben dem Hauptmenü, allerdings immer einen Menüpunkt zu weit unten. Wie kann ich das hochziehen?
Da hast Du Dir ja schön Code irgendwo rauskopiert ;-)
Quick & Dirty: Trage in die CSS-Klasse für die Submenüs einfach ein margin-top:-20px; ein. Also:
#smenu1, #smenu2, #smenu3, #smenu4
{
font-size: 12px;
display: none;
width: 140px;
left: 140px;
margin-top:-20px;
position: absolute;
}Dann geht es.
-
Da hast Du Dir ja schön Code irgendwo rauskopiert ;-)
Stimmt!^^
Danke, super! Jetzt geht wieder alles optimal!
-