nicht angemeldet
Ich habe versucht mit der Methode die auf Selfhtml vorgestellt wird eine Navigationsleiste mit submenus zu erstellen. Allerdings verschwinden die untergeordneten Einträge nicht, bis man über sie mit der maus fährt, sondern bleiben einfach versetzt stehen. Ich bin ziemlich müde und kann das Problem jetzt auch nicht besser beschreiben. Vlt kann ja ein etwas erfahrener einen Blick auf meinen Quelltext werfen. Danke im Vorraus.
body {
background-image:url(images/hintergrund.gif)
}
#seite { /*Zentraler Tag für die mittige Zentrierung*/
text-align: left;
margin: 0 auto; /* standardkonforme horizontale Zentrierung */
width: 800px;
padding: 1em;
background-color:#ffffff;
min-height: 1050px;
}
#seite div {
}
#titel {
width: 100%;
background-color:#ffffff;
text-align: center;
}
#menu{
width: 170px;
margin-top:50px
}
ul#Navigation {
float: left;
width: 170px;
margin: 0; padding: 1px;
background-color: #616a2b;
}
ul#Navigation li {
list-style: none;
width: 160px;
float: left;
position: relative;
margin: 3px;
margin-left: 5px;
padding: 0;
}
*:first-child+html ul#Navigation li { /* Korrektur fuer den IE 7 */
margin-bottom: -0.1em;
}
ul#Navigation li ul {
list-style: none;
margin: 0;
padding: 0;
position: absolute;
top: 1.6em;
left: -1em;
display: none;
}
ul#Navigation li ul li {
list-style: none;
width: 160px;
float:none;
display:block;
margin-bottom: 2px;
}
ul#Navigation a {
display:block;
color:#eadd88;
font-size:20px;
font-family:"Bookman Old Style";
font-weight: normal;
text-decoration:none;
background-color: #424421;
text-align: center;
width:160px;
height:25px;
}
ul#Navigation a:hover {
color: #424421;
background-color: #eadd88;
}
ul#Navigation a:active {
color:#000000;
background-color: #424421;
}
ul#Navigation span {
display:block;
font-size:20px;
font-family:"Bookman Old Style";
color:#424421;
background-color:#eadd88;
text-align: center;
}
#Info {
float: right; width: 130px;
margin: 0; padding: 5px;
border: 1px solid silver;
}
#Info p {
margin: 0;
}
#text {
margin-left:174px;
border: 1px solid silver;
width: 478px;
}
#text p {
font-family: arial;
text-align:left;
margin: 1em;
color:#000000;
}
img {
border: 0;
}
Hier noch der Quelltext meiner Startseite:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Webseite</title>
<link rel="shortcut icon" href="images/symbol.ico" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="seite">
<div id="titel">
<img src="images/revolution.gif" width="663" height="94" alt="Willkommen" />
</div>
<div id="menu">
<ul id="Navigation">
<li><a href="index.htm">Home</a></li>
<li><a href="ordner1/index.htm">Link1</a></li>
<li><a href="ordner2/index.htm">Link2</a></li>
<ul>
<li><a href="ordner2/bilder.htm">Link2a</a></li>
<li><a href="ordner2/text.htm">Link2b</a></li>
</ul>
<li><a href="ueber-mich.htm">Über Mich</a><li>
<li><a href="impressum.htm">Impressum</a></li>
</ul>
</div>
<div id="Info">
<p>Text
</p>
<p>
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img style="border:0;width:88px;height:31px"
src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="CSS ist valide!" />
</a>
</p>
</div>
<div id="text">
<p>
Willkommenstext
</p>
</div>
</div>
</body>
</html>
Danke im Vorraus
PS: Ja ich habe die SuFu bemüht!!