Also, ich habe versucht die ganzen Seiten zu welchen ich durch das FAQ weitergeleitet werde durchzulesen, und habe mich mittlerweile auch schon durch weitere verschiedene Tutorials gearbeitet. Sowohl durch die Links, wie als auch durch selbst ergoogeltes
Leider verstehe ich nicht genau was du mir mit "falschem Markup" zu sagen versuchst, bzw. was genau du damit meinst. Ich lerne gerne und habe auch kein Problem damit, wenn man mir beibringt, dass ich was falsche gemacht habe. Ich würde allerdings gerne verstehen was genau ich denn falsch gemacht habe
Also, hier meine neuste Version: (Alle Styles und Scripts habe ich zur verbesserten Anschauung direct im Code eingebaut)
Hoffe auf konstruktive Kritik,
Freundliche und lernfreudige Grüsse Philippe
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>CSS Dropdown Menü - Test 1</title>
<style>
#navbar {
margin: 0;
padding: 0;
height: 1em; }
#navbar li {
list-style: none;
float: left; }
#navbar li a {
display: block;
padding: 3px 8px;
background-color: #5e8ce9;
color: #fff;
text-decoration: none; }
#navbar li ul {
display: none;
width: 10em; /* Weite für Opera Bug */
background-color: #69f;}
#navbar li:hover ul, #navbar li.hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0; }
#navbar li:hover li, #navbar li.hover li {
float: none; }
#navbar li:hover li a, #navbar li.hover li a {
background-color: #151515;
border-bottom: 0px;
color: #ffffff; }
#navbar li li a:hover {
background-color: #202020; }
body {
background-color: #000000;
}
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
}
</style>
<script>
// Javascript originally by Patrick Griffiths and Dan Webb.
// http://htmldog.com/articles/suckerfish/dropdowns
sfHover = function() {
var sfEls = document.getElementById("navbar").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" hover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" hover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
</head>
<body>
<ul id="navbar">
<li>
<a href="#">MENÜ 1</a>
</li>
<li>
<a href="#">MENÜ 2</a>
<ul>
<li><a href="#">Subitem 1</a></li>
<li><a href="#">Subitem 2</a></li>
</ul>
</li>
<li>
<a href="#">MENÜ 3</a>
<ul>
<li><a href="#">Subitem 1</a></li>
<li><a href="#">Subitem 2</a></li>
<li><a href="#">Subitem 3</a></li>
</ul>
</li>
<li>
<a href="#">MENÜ 4</a>
<ul>
<li><a href="#">Subitem 1</a></li>
<li><a href="#">Subitem 2</a></li>
<li><a href="#">Subitem 3</a></li>
<li><a href="#">Subitem 4</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>