Hallo Forum,
danke erstmal für Eure bisherigen Antworten.
Ich baue gerade noch eine Homepage, scheiter aber beim Hovereffekt.
Alle Hovers funktionieren, bis auf eines.
Erstmal die CSS:
Ich wollte, dass die Links im <li>, also die im Dropdown Menü hovern, wenn ich mir der Maus draufgehe. Die Farbe ist so okay. Nur es hovert nicht.
Habe ich etwas übersehen?
Edit:
Hier noch mein Menü-Schnipsel:
danke erstmal für Eure bisherigen Antworten.
Ich baue gerade noch eine Homepage, scheiter aber beim Hovereffekt.
Alle Hovers funktionieren, bis auf eines.
Erstmal die CSS:
PHP:
body{
padding:0;
margin:0;
color:#ffff00;
font-family: verdana, tahoma, sans-serif;
font-size: 76%;
background-color: #ffff00;
background-image: none;
background-repeat: no-repeat;
}
a{
text-decoration:none;
background-color:inherit;
font-weight:bold;
color:#286ea0;
}
a:hover{
background-color:inherit;
color:#303030;
}
h1{
margin:0;
font-size:3.6em;
letter-spacing:-3px;
text-align:right;
background-color:inherit;
color:#000000;
}
h2{
margin:5px 0 10px 0;
font-size:1.6em;
letter-spacing:-1px;
font-weight:normal;
}
p{
margin:0 0 15px 0;
line-height:1.3em;
}
img{
float:left;
margin:0 10px 8px 0;
}
#title{
width:700px;
margin-top: 20px;
margin-right: auto;
margin-bottom: -4px;
margin-left: auto;
}
#container{
margin:0 auto 15px auto;
width:1000px;
padding:10px;
background:#ffffff url(front.png) bottom left no-repeat;
color:#000000;
border:20px solid #000000;
}
#sidebar{
float:left;
width:120px;
padding-left:170px;
}
#main{
width:785px;
float:right;
}
#footer{
clear:both;
}
#menu {
width: 100%;
background: #ffffff;
font-family: Verdana;
font-size: 1em;
line-height: 1.5;
float: left;
}
/*--Setzt alle Abstände auf "Null"--*/
* {
margin: 0;
padding: 0;
}
/*--formatiert die Themenblöcke--*/
#menu ul {
float: left;
width: 140px;
list-style-type: none;
}
/*--definiert die Blocküberschriften--*/
#menu h3 {
font-size: 1em;
text-align: center;
color: #000;
border: 1px solid #000000;
background: #ffff00;
}
/*--definiert die "Drop-Down-Links" im Normalzustand--*/
#menu a {
text-decoration: none;
display: block;
text-align: center;
background: #ffff00;
border: 1px solid #000000;
color: #000000;
}
.menu:hover{
background-color:#ffff00;
color:#ffffff;
border:1px solid #000000;
}
/*
*verhindert im Zusammenhang mit position absolute bei ul ul
*eine Höhenvergrößerung von #menu beim Hovern--
*/
#menu li {
position: relative;
}
/*--versteckt die "Drop-Down-Links", solange nicht gehovert wird--*/
#menu ul ul {
position: absolute;
z-index: 2;
display: none;
}
/*--lässt die Dropdown-Links beim Hovern erscheinen--*/
#menu ul li:hover ul {
display: block;
}
/*--nur für IE-Versionen kleiner gleich 6 erkennbar--*/
* html #menu ul li {
float: left;
width: 100%;
}
/*--nur für IE 7 erkennbar--*/
*+ html #menu ul li {
float: left;
width: 100%;
}
/*--bewirkt Hover-Effekt für IE kleiner 7 auch für ul- und li-Elemente--*/
*html body {
behavior: url(csshover3-source.htc);
font-size: 100%;
}
*html #menu ul li a {
height: 1%;
}
/*--definiert einen Einzellink im Normalzustand, wenn kein Drop-Down erforderlich--*/
#menu a.direkt:link {
font-size: 1em;
font-weight: bold;
text-align: center;
color: #000000;
border: 1px solid #000000;
background: #ffff00;
}
/*--definiert einen Einzellink im Hoverzustand, wenn kein Drop-Down erforderlich--*/
#menu a.direkt:hover {
color: #0f598d;
background: #ffffff;
border: 1px solid #000000;
}
.credits{
margin-bottom:0;
font-size:0.8em;
background-color:inherit;
color:#aaaaaa;
}
.credits a{
background-color:inherit;
color:#aaaaaa;
}
.small{
font-size:0.8em;
}
.center{
text-align:center;
}
Habe ich etwas übersehen?
Edit:
Hier noch mein Menü-Schnipsel:
PHP:
<div id="container">
<div id="menu"><!-- öffnet die Navigationsleiste-->
<ul><!-- öffnet den ersten Themenblock -->
<li><!-- öffnet die Listeneinträge von Thema 1 -->
<h3>Thema 1</h3>
<ul><!-- öffnet die Klappnavi von Thema 1 -->
<li><a href="#">Thema 1.1</a></li>
<li><a href="#">Thema 1.2</a></li>
<li><a href="#">Thema 1.3</a></li>
</ul><!-- schließt die Klappnavi von Thema 1 -->
</li>
<!-- schließt die Listeneinträge von Thema 1 -->
</ul><!--schließt den ersten Themenblock-->
<ul><!-- öffnet den ersten Themenblock -->
<li><!-- öffnet die Listeneinträge von Thema 1 -->
<h3>Thema 2</h3>
<ul><!-- öffnet die Klappnavi von Thema 2 -->
<li><a href="#">Thema 2.1</a></li>
<li><a href="#">Thema 2.2</a></li>
<li><a href="#">Thema 2.3</a></li>
</ul><!-- schließt die Klappnavi von Thema 2 -->
</li>
<!-- schließt die Listeneinträge von Thema 1 -->
</ul><!--schließt den ersten Themenblock-->
<ul><!-- öffnet den dritten Themenblock -->
<li><a class="direkt" href="#">Thema 3</a></li>
</ul><!--schließt den dritten Themenblock-->
</div><!-- schließt die Menüleiste #menu -->
<div style="clear: both;"> </div> <!--cleart die gefloatete Menüleiste-->
Zuletzt bearbeitet: