Guten Abend!
Gleich zu meiner ersten Page-Navigation, habe ich mir eine weitere Navigation weiter unten im Header erlaubt, die aber durch eine Verlinkung funktionieren soll. Diese sieht ungefähr so aus:
<ul id="nav2">
<li <?php { echo ' class="current-cat" '; } ?>><a href="/abkurzungen/">Abkürzungen</a></li>
<li <?php { echo ' class="current-cat" '; } ?>><a href="/kartenwerte/">Kartenwerte</a></li>
<li <?php { echo ' class="current-cat" '; } ?>><a href="/bannedlist/">Bannedlist</a></li>
<li <?php { echo ' class="current-cat" '; } ?>><a href="/levelliste/">Levelliste</a></li>
<li <?php { echo ' class="current-cat" '; } ?>><a href="">In Arbeit</a></li>
<li <?php { echo ' class="current-cat" '; } ?>><a href="">In Arbeit</a></li>
<li <?php { echo ' class="current-cat" '; } ?>><a href="">In Arbeit</a></li>
</ul>
Diese werden alle auf eine private Seite geschickt, um hervorzugeben. Jedenfalls liegt mein Problem beim hover,der irgendwie in der CSS nicht klappen will. Hier der Code dazu:
/* NAVIGATION MENUS2 */
#nav2 {
background:# repeat-x;
font-size:12px;
font-family: Arial, Helvetica, sans-serif;
padding: 9px 16px;
text-decoration: none;
font-weight:bold;
text-transform: uppercase;
width:100%;
}
#nav2, #nav2 ul {
float:left;
list-style:none;
line-height:30px;
padding:0;
border:1px solid #;
margin:0;
width:100%;
}
#nav2 a {
display:block;
color:#dddddd;
text-decoration:none;
padding:0px 10px;
background: url(http://image-collector.de/img/1280018745-n.png) top left repeat-x;
}
#nav2 li {
float:left;
padding:0;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
-border-radius: 3px;
}
#nav2 ul {
position:absolute;
left:-999em;
height:auto;
width:151px;
font-weight:normal;
margin:0;
line-height:1;
border:0;
border-top:1px solid #666666;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
-border-radius: 3px;
}
#nav2 li li {
width:149px;
border-bottom:1px solid #666666;
border-left:1px solid #666666;
border-right:1px solid #666666;
font-weight:bold;
font-family:helvetica,sans-serif;
}
#nav2 li li a {
padding:8px 10px;
width:130px;
font-size:10px;
color:#dddddd;
}
#nav2 li ul ul {
margin:-29px 0 0 150px;
}
#nav2 li li:hover {
background:#501350;
}
#nav2 li ul li:hover a, #nav2 li ul li li:hover a, #nav2 li ul li li li:hover a, #nav2 li ul li li li:hover a {
color:#fff;
}
#nav2 li:hover a, #nav2 li.sfhover a {
color:#dddddd;
}
#nav2 li:hover li a, #nav2 li li:hover li a, #nav2 li li li:hover li a, #nav2 li li li li:hover li a {
color:#dddddd;
}
#nav2 li:hover ul ul, #nav2 li:hover ul ul ul, #nav2 li:hover ul ul ul ul, #nav2 li.sfhover ul ul, #nav2 li.sfhover ul ul ul, #nav2 li.sfhover ul ul ul ul {
left:-999em;
}
#nav2 li:hover ul, #nav2 li li:hover ul, #nav2 li li li:hover ul, #nav2 li li li li:hover ul, #nav2 li.sfhover ul, #nav2 li li.sfhover ul, #nav2 li li li.sfhover ul, #nav2 li li li li.sfhover ul {
left:auto;
background: rgba(0, 0, 0, 0.7);
}
#nav2 li:hover, #nav2 li.sfhover {
background:#501350;
}
#nav2 .current_page_parent, #nav2 .current_page_ancestor, #nav2 .current-cat-parent {
background:#501350;
}
#nav2 .current-cat, #nav2 .current_page_item {
background:#501350;
}
#nav2 .current_page_ancestor a:after, #nav2 .current_page_ancestor li a:after, #nav2 .current_page_ancestor li li a:after, #nav2 .current_page_ancestor li li li a:after, #nav2 .current_page_ancestor li li li li a:after, #nav2 .current-cat-parent a:after, #nav2 .current-cat-parent li a:after, #nav2 .current-cat-parent li li a:after, #nav2 .current-cat-parent li li li a:after, #nav2 .current-cat-parent li li li li a:after, #nav2 .current_page_parent a:after, #nav2 .current_page_parent li a:after, #nav2 .current_page_parent li li a:after, #nav2 .current_page_parent li li li a:after, #nav2 .current_page_parent li li li li a:after {
content:"";
}
#nav2 .current_page_ancestor a:after, #nav2 li .current_page_ancestor a:after, #nav2 li li .current_page_ancestor a:after, #nav2 li li li .current_page_ancestor a:after, #nav2 .current-cat-parent a:after, #nav2 li .current-cat-parent a:after, #nav2 li li .current-cat-parent a:after, #nav2 li li li .current-cat-parent a:after, #nav2 .current_page_parent a:after, #nav2 li .current_page_parent a:after, #nav2 li li .current_page_parent a:after, #nav2 li li li .current_page_parent a:after {
color:#fff;
content:"";
}
#nav2 .current-cat a:after, #nav2 li .current-cat a:after, #nav2 li li .current-cat a:after, #nav2 li li li .current-cat a:after, #nav2 li li li li .current-cat a:after, #nav2 .current_page_item a:after, #nav2 li .current_page_item a:after, #nav2 li li .current_page_item a:after, #nav2 li li li .current_page_item a:after, #nav2 li li li li .current_page_item a:after {
color:#fff;
content:"";
}
Alles anzeigen
Das ist im Grunde derselbe Code von der ersten Navigation. Er will mir einfach keinen richtigen hover anzeigen. Er zeigt es zwar an, wie in der ersten Navigation, aber laufend und nicht beim Drübergehen mit der Maus.
Hier noch ein Screenshot, damit ihr wisst, was ich genau meine: http://image-collector.de/img/1280022428-nav.png