Hallo zusammen,

ich habe da ein kleines (für mich großes) Problem: der Kollege, der fürs Coden zuständig ist im Urlaub und das ohne Handy. Nun muss ich als Designer an einer Navigation dringend eine Änderung vornehmen und bekomme das einfach nicht hin. Ich habe zwar Grundkenntnisse, aber es will einfach nicht klappen.

Das Problem: eine Navigation soll eine .active Pseudoklasse erhalten und ich bastle hier schon seit Stunden - ohne Erfolg.

Der Code sieht so aus:

/* Main Navigation
====================================*/
.selectnav {
display: none;
cursor: pointer;
width: 100%;
padding: 8px;
height: 37px;
float: left;
font-size: 14px;
margin: 15px 0;
}

#navigation {
background: #303030;
display: block;
width: 100%;
float: left;
max-height: 52px;
margin: 0 0 15px 0;
}

#navigation ul,
#navigation li {
list-style:none;
padding:0;
margin:0;
display:inline;
}
#navigation ul li{
float:left;
position:relative;
}

#navigation ul li a {
display: inline-block;
color: #fff;
text-decoration: none;
font-size: 12px;
font-weight: bold;
padding: 17px 25px;
background: url(../images/navigation-divider.png) no-repeat right 50%;
}

#navigation ul li a:hover,
#current:hover {
background: #72b626 !important;
color: #fff;
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
-ms-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}


#navigation ul ul {
position: absolute;
display: none;
top: 51px;
left: 0;
background: #303030;
z-index: 999;
}

#navigation ul ul li a {color: #aaa;}
#navigation ul ul li a:hover {
color: #fff;
}

#navigation ul ul li a {
display: block;
width: 150px;
margin: 0;
padding: 9px 18px;
font-family: Arial, sans-serif;
font-weight: normal;
font-size: 12px;
border-bottom: 1px solid #404040;
background: none;
}

#navigation ul ul ul {
position: absolute;
top:0px;
left:100%;
z-index: 999;
}

#navigation ul ul ul li a {
border-bottom: 1px solid #404040 !important;
border-top: 1px solid transparent;
background: none;
}

#navigation ul ul li:last-child a, #navigation ul ul li:last-child a:hover {border-bottom: 1px solid transparent}
#navigation ul ul ul li:last-child a {border-bottom: 1px solid transparent !important}
#navigation ul li:hover>ul {opacity: 1; position:absolute; top:99%; left:0;}
#navigation ul ul li:hover>ul {position:absolute; top:0; left:100%; opacity: 1; z-index:497;}
#navigation ul li:hover> a {background: #72b626;}
#navigation ul ul li:hover > a {color: #fff;}

Kann mir da bitte jemand helfen. Ich wäre endlos dankbar …

Zur Erklärung: Es gibt keine .active Pseudoklasse, .active ist eine ganz normale Klasse. Es gibt :active als Pseudoklasse, die wird aber nirgends bei dir verwendet. Deshalb ist nicht klar, was du genau erzielen willst.
Auch ist CSS ohne dazugehöriges HTML nutzlos. Um es anders zu sagen, das ist, wie wenn ich einen Designer fragen würde: Wie kann ich mein Design benutzerfreundlicher gestalten, ich habe die Farben gelb und grün genommen? (grob gesagt)

Danke für die schnelle Reaktion. Wie gesagt habe ich nur Grundwissen.

Das ist der HTML-Code zur Navigation. Den class="active" habe ich eingesetzt und dann endlos im CSS herumprobiert.

<!-- Navigation -->
<div class="sixteen columns">

<div id="navigation">
<ul id="nav">

<li><a href="#" class="active">Home</a></li>

<li><a href="ueber_mich.html">Über mich</a></li>

<li><a href="ablauf.html">Ablauf Training</a></li>

<li><a href="inhalt.html">Inhalt Training</a></li>

<li><a href="gruppentraining.html">Gruppen-Training</a></li>

<li><a href="kontakt.html">Kontakt</a></li>

</ul>


</div>
<div class="clear"></div>

</div>
<!-- Navigation / End -->

So wie du es jetzt hast, hat der erste Menüpunkt die Klasse active. Die kannst du jetzt nach belieben stylen, musst nur auf die Spezifität achten

SUPER. Ganz heissen Dank. Das war kompetente Hilfe. Einen schönen Abend noch!