DropDownMenu - HoverEffect geht nicht

FIHenryL · 11.05.2012

Hallo ich habe versucht das Tutorial Drop-Down-Navigation mit CSS gestalten nachzuvollziehen. Ich habe einen Header Div einen Content Div und einen Footer div.
Das NavMenue habe ich in den Header gepackt. In der Browservorschau funktioniert es wie ich es erwarte. Aber wenn ich die HTML Datei direkt öffne steht alles nebeneinander.
Der HoverEffekt funtioniert nicht. (siehe ScreenShots)
Vielen Dank für Eure Hilfe.

FIHenryL · 11.05.2012

AW: DropDownMenu - HoverEffect geht nicht

Sorry habe die ScreenShot lins vergessen.

VG

The_Ball_Master · 12.05.2012

AW: DropDownMenu - HoverEffect geht nicht

Klick mich

Ganze viele wunderschöne Menüs

Ich selbst benutzte mein Menü auch von dort, vllt ist dir damit ja ehr geholfen als wen du dir selbst was zusammen schusterst.

Uwe367 · 13.05.2012

AW: DropDownMenu - HoverEffect geht nicht

Schau mal im Quellcode nach ob die erforderlichen Dateien geladen werden. Sieht fast so aus als würden die Pfadangaben nicht stimmen.

FIHenryL · 14.05.2012

AW: DropDownMenu - HoverEffect geht nicht

Es gibt nur eine Datei und der CSS Teil steht im <style type text/css> :-(.
Ich habe nur nach dem navi Teil den Lorum.... Text und einen <footer> angefügt.

Uwe367 · 14.05.2012

AW: DropDownMenu - HoverEffect geht nicht

Ist schwer etwas dazu zu sagen wenn man kein Beispiel oder keinen Quelltext hat. Kannst mal eines davon posten?
Am besten die Beispielseite und falls das nicht geht, den Quellcode.

FIHenryL · 14.05.2012

AW: DropDownMenu - HoverEffect geht nicht

Vielen Dank für Eure Hilfe: Hier der HTML Code:
--//------------------------------------------------------------------------

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<title>..:: Vorlage ::..</title>
<meta charset="UFT-8"/>
<style type="text/css">
header, section, footer, aside, nav, article {
display: block;
}

#navi {
font-family: Verdana;
font-size: 12px;
}

#navi, #navi ul {
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 li a,
#navi li a:link,
#navi li a:active,
#navi li a:visited {
display: block;
padding: 5px 10px;
color: #900B09;
background-color: #EFEFEF;
text-decoration: none;
}

#navi li a:hover {
color: #EFEFEF;
background-color: #990000;
}

#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: #990000;
background-color: #DFDFDF;
text-decoration: none;
}

#navi li ul a:hover {
color: #DFDFDF;
background-color: #990000;
}

#content {
border:1px solid #878787;
width: 600px;
padding: 0 15px;
margin: 0 0 10px 0;
float: left;
}

#doc {
width:760px;
margin:0px auto;
text-align:left;
}
.box-shadow{
-webkit-box-shadow: 2px 2px 5px 3px rgba(75, 75, 75, 0.4);
box-shadow: 2px 2px 5px 3px rgba(75, 75, 75, 0.4);
}
.border-radius{
-webkit-border-radius: 5px;
border-radius: 5px;
}

.gray-border
{
border: 1px solid hsl(0,0%,70%);
}
</style>
</head>
<body style="width:760px;margin:0px auto;text-align:left;border:dashed 1px #878787;"> <header>  </header> <nav>
<ul id="navi">
<li><a href="#">Page 1</a></li>
<ul>
<li><a href="#">Page 1.1</a></li>
<li><a href="#">Page 1.2</a></li>
<li><a href="#">Page 1.3</a></li>
</ul>
</li>
<li><a href="#">Page 2</a></li>
<ul>
<li><a href="#">Page 2.1</a></li>
<li><a href="#">Page 2.2</a></li>
<li><a href="#">Page 2.3</a></li>
</ul>
</li>
<li><a href="#">Page 3</a></li>
<ul>
<li><a href="#">Page 3.1</a></li>
<li><a href="#">Page 3.2</a></li>
<li><a href="#">Page 3.3</a></li>
</ul>
</li>
<li><a href="#">Page 4</a></li>
<ul>
<li><a href="#">Page 4.1</a></li>
<li><a href="#">Page 4.2</a></li>
<li><a href="#">Page 4.3</a></li>
<li><a href="#">Page 4.4</a></li>
</ul>
</li>
</ul>
</nav>
<img src="images/spacer.gif" width="100" height="10" alt="" /> <div class="box-shadow border-radius"> <section>
<article>
<h2>Artikel Überschrift</h2>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum.
</p>
<p>
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</article>
</section>
</div>
<footer>
<br />hier ist unten
</footer>
</body>
</html>