Mootools active css Problem

Hallo liebe Forengemeinde,

ich baue gerade meine erste Seite mit Typolight und habe jetzt ein kleines Problem mit der Mootools Navi.

Ich weiß nicht wie ich den aktiven Link mittels css ansprechen kann.

Mein bisheres Mootools Css stieht so aus :

Code:

---


      .mod_mootoolsnav
      {
              height:30px;
              border:1px solid #ddd;
              font-weight:bold;
              font-size:14px;
              line-height:30px;
              margin:0px 15px;
      }

      .mod_mootoolsnav .mod_mootoolsnav block li
      {
              font-weight:bold;
              font-size:14px;
              line-height:30px;
              margin:0px 15px;
      }

      .mod_mootoolsnav li
      {
              float:left;
              line-height:30px;
              list-style:none;
      }

      .mod_mootoolsnav,
      .mod_mootoolsnav *
      {
              margin:0;
              padding:0;
              list-style: none;
      }

      .mod_mootoolsnav li a
      {
              display:block;
              border-right:1px solid #ddd;
              font-family:Verdana, Arial, Helvetica, sans-serif;
              font-weight:bold;
              font-size:11px;
              color:#666666;
              line-height:30px;
              padding: 0 13px;
      }

      .mod_mootoolsnav li a:hover
      {
              text-decoration:none;
      }

      .mod_mootoolsnav li ul
      {
              width:15em;
              left:-999em;
              position:absolute;
      }

      .mod_mootoolsnav li:hover ul,
      .mod_mootoolsnav li.sfhover ul
      {
              left:auto;
              z-index:10 !important;
      }

      .mod_mootoolsnav li ul li
      {
              width:15em;
              display:block !important;
              border:1px solid #ddd !important;
              border-top:none !important;
              background:#fff;
      }

---

Damit ihr genau wisst was ich meine häng ich noch einen Screenshot an.
ich hab die Vorlage von einer Mootoolsseite und hab das ganze dann auf Typolight umgeschrieben . Bei dieser Stelle war ich mir aber nicht sicher vielleicht liegt da auch der Hund begraben allerdings hab ich nach mehrmaligen probiern nichts erreicht . Allerdings ist in dieser Sektion nichts über Schrift etc vermerkt.

Original Code aus Vorlage

Code:

---

      #nav li:hover ul,
      #nav2 li.sfhover ul
      {
              left:auto;
              z-index:10 !important;
}

---

Mein Code

Code:

---

      .mod_mootoolsnav li:hover ul,
      .mod_mootoolsnav li.sfhover ul
      {
              left:auto;
              z-index:10 !important;
      }

---

Vielen Dank für die Hilfe

Ersetze das:

HTML-Code:

---

      .mod_mootoolsnav li a
      {
              display:block;
              border-right:1px solid #ddd;
              font-family:Verdana, Arial, Helvetica, sans-serif;
              font-weight:bold;
              font-size:11px;
              color:#666666;
              line-height:30px;
              padding: 0 13px;
      }

---

mit dem:

HTML-Code:

---

      .mod_mootoolsnav li a,.mod_mootoolsnav li p
      {
              display:block;
              border-right:1px solid #ddd;
              font-family:Verdana, Arial, Helvetica, sans-serif;
              font-weight:bold;
              font-size:11px;
              color:#666666;
              line-height:30px;
              padding: 0 13px;
      }

---

klasse danke ! Hat funktioniert

noch ein letztes Problem zu der Navi, natürlich mit dem IE

Der IE verschiebt das Pulldown Menü auf die hinterste Ebene. Somit liegt alles auf der Seite vor dem Pulldown Menü

Im FF ist das ja mit dem z-index geregelt

Code:

---

      .mod_mootoolsnav li:hover ul,
      .mod_mootoolsnav li.sfhover ul
      {
              left:auto;
              z-index:10 !important;
 }

---

Wie übersetze ich das jetzt für den IE ?

um das z-index problem in der navi zu lösen muss man zusätzlich zu der navi

auch header .inside
einen hohen z-index zuweisen

damit die Navi dann im Ie ebenfalls über dem content erscheint

(vorraussetzung natürlich dass ihr die navi im header eingebunden habt :) )

Du musst wissen, dass z-index immer von dem Parent-Element auf das Child-Element übertragen wird. Das bedeutet, dass wenn z.B. der Container ein höheres z-index als der Header hat, das Menü aber einen höheren als den Container, ist der Container trotzdem über dem Menü.