• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[ERLEDIGT] Horizontales + Vertikales Menü - HTML + CSS + JavaScript

htmlexperte1+

Neues Mitglied
Gut das Vertikale krieg ich ja noch hin aber das Horizontale haut nicht hin und hab auch keinen plan...

"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"Vertikal:"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-

---------------------------------------------------------------------HTML-----------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>TITLE</title>
<link type="text/css" rel="stylesheet" href="../css/css.css">
<!-- Popup & Whitespace Bugfix für IE7 -->
<!--[if lte IE 7]><style type="text/css">
#navi a {
min-height: 0;
}
* html #navi a {
height: 1px;
}
#navi li:hover {
text-indent: 0;
}
</style><![endif]-->
<script type="text/javascript">
sfHover = function() {
var sfEls = document.getElementById("navi").
getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls.onmouseover=function() {
this.className+=" sfhover";
}
sfEls.onmouseout=function() {
this.className=this.className.replace(new
RegExp(" sfhover\b"), "");
}}}
if (window.attachEvent) window.attachEvent("onload",
sfHover);
</script>
</head>
<body>

<ul id="navi">
<li><a href="#">Seite 1</a>
<ul>
<li><a href="#">Seite 1.1</a></li>
<li><a href="#">Seite 1.2</a></li>
<li><a href="#">Seite 1.3</a></li>
</ul>
</li>
<li><a href="#">Seite 2</a>
<ul>
<li><a href="#">Seite 2.1</a></li>
<li><a href="#">Seite 2.2</a></li>
<li><a href="#">Seite 2.3</a></li>
</ul>
</li>
</ul>


</body>
</html>
----------------------------------------------------------------------CSS------------------------------------------------------------------
* {
}

#navi ul {padding:0;
margin:0;
}

#navi {padding:0;
margin:0;
}

#navi li {float:left;
width:9em;
position:relative;
list-style-type:none;
}

#navi li ul a {margin-left:1em;
}

#navi li ul {left: -9999px;
position: absolute;
}

#navi li:hover ul {left: auto;
}


#navi {
font-family: Verdana;
}

#navi li a,
#navi li a:link,
#navi li a:active,
#navi li a:visited {
display: block;
padding: 5px 10px;
color: #000;
background-color: #ccc;
text-decoration: none;
}
#navi li a:hover {
color: #fff;
background-color: #000;
}

#navi li ul a,
#navi li ul a:link,
#navi li ul a:active,
#navi li ul a:visited {
display: block;
margin-left: 1em;
padding: 5px 10px;
color: #000;
background-color: #ddd;
text-decoration: none;
}
#navi li ul a:hover {
color: #fff;
background-color: #000;
}

"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"Horizontal:"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-"-

---------------------------------------------------------------------HTML-----------------------------------------------------------------

----------------------------------------------------------------------CSS------------------------------------------------------------------


____________________________________________________________________________________________________

Gut das Vertikale krieg ich ja noch hin aber das Horizontale haut nicht hin und hab auch keinen plan...
 
Erstmal vorweg frage ich mich, warum du die zweite Liste durch den negativen-left Wert aus dem Bildschirm verschwinden lässt, statt sie mit display: none; auszublenden und bspw. display: block; einzublenden.

Zu deinem Problem:
Willst du das Menü zur Seite aufklappen, solltest du die float-Angabe entfernen, damit die Themen untereinanderstehen und sich dein Menü nicht überlappt.
Da dein Ober-Menü bereits eine feste Breite hat, kannst du mithilfe von left dein Untermenü um diese Breite verschieben und eventl. mit top die Höhe anpassen
 
Zurück
Oben