CSS Dropdown/Dropline Navigation aufgeklappt lassen

[xero7]

Hallo liebe Foren-Gemeinde,

ich stehe mal wieder voll auf dem Schlauch und bin am verzweifeln.

Ich habe mir eine Dropline Navigation erstellt, welche auch einwandfrei funktioniert. Jedoch möchte ich nun, dass wenn man noch kein Link angeklickt hat, dass dann immer direkt schon die ersten Subnavigations-Elemente von der Navigation automatisch "aktiviert" werden.

http://www.myimg.de/?img=klamme8667.jpg

Geht das nur mit JavaScript oder gibt es da eine clevere CSS Möglichkeit.

Aktuell sieht meine HTML + CSS Datei folgendermaßen aus:

<div class="navigation">
    <ul id="nav">
      <li class="current"><a href="#">Home</a>
        <ul>
          <li><a href="#">Was wir für Sie tun können</a></li>
          <li><a href="#">Über uns</a></li>
          <li><a href="#">Referenzen</a></li>
        </ul>
      </li>
      <li><a href="#">Planungsleistungen</a>
        <ul>
          <li><a href="#">Gasnutzungsanlagen</a></li>
          <li><a href="#">Gasaufbereitungsanlagen</a></li>
          <li><a href="#">Planung spezieller Aggregate</a></li>
          <li><a href="#">Messtechnikplanung für Klimaschutzprojekte</a></li>
        </ul>
      </li>
      <li><a href="#">Beratungsleistungen</a>
        <ul>
          <li><a href="#">Energie- und Umwelt-Gutachten</a></li>
          <li><a href="#">Wirtschaftlichkeitsberechnung</a></li>
          <li><a href="#">Vergleichsuntersuchung</a></li>
          <li><a href="#">Betriebsdokumentation für Verifizierungen</a></li>
        </ul>
      </li>
        <li><a href="#">Betriebsbetreuung</a>
        <ul>
          <li><a href="#">Energie- und Umwelt-Gutachten</a></li>
          <li><a href="#">Wirtschaftlichkeitsberechnung</a></li>
          <li><a href="#">Vergleichsuntersuchung</a></li>
          <li><a href="#">Betriebsdokumentation für Verifizierungen</a></li>
        </ul>
      </li>
      <li><a href="#">Projektbeispiele</a>
        <ul>
          <li><a href="#">Grubengasnutzung Ukraine</a></li>
          <li><a href="#">Schwachgasnutzung Russland</a></li>
          <li><a href="#">Grubengas-Absauganl. Kasachstan</a></li>
          <li><a href="#">Grubengas-BHKW Deutschland</a></li>
          <li><a href="#">Sondergas-Verdichteranl.</a></li>
        </ul>
      </li>
      <li><a href="#">Kontakte</a></li>
      <li><a href="#">Links</a></li>
      <li><a href="#">Impressum</a></li>
    </ul>
</div>

.navigation {
    width: 1013px;
    height: 89px;
    background: url('images/navigation.png') no-repeat;
    margin: 0px auto;
    padding-left: 40px;
    padding-top: 10px;
}

ul#nav {
  float: left;
  margin: 0;
  padding: 0;
  list-style: none;
  -moz-border-radius-topright: 10px;
  -webkit-border-top-right-radius: 10px;
  -moz-border-radius-topleft: 10px;
  -webkit-border-top-left-radius: 10px; 
}
 
ul#nav li {
  display: inline;
}
 
ul#nav li a {
  float: left;
  font: bold 13px tahoma, arial;
  line-height: 40px;
  color: #fff;
  text-decoration: none;
  margin: 0;
  padding: 0 18px;
  -moz-border-radius-topright: 10px;
  -webkit-border-top-right-radius: 10px;
  -moz-border-radius-topleft: 10px;
  -webkit-border-top-left-radius: 10px;    
}
 

ul#nav .current a, ul#nav li:hover > a  {
  color: #fff;
  text-decoration: underline;
  -moz-border-radius-topright: 10px;
  -webkit-border-top-right-radius: 10px;
  -moz-border-radius-topleft: 10px;
  -webkit-border-top-left-radius: 10px;
}
 

ul#nav  ul {
  display: none;
}

ul#nav li:hover > ul {
  position: absolute;
  display: block;
  height: 50px;
  position: absolute;
  font-weight: bold;
  margin: 40px 0 0 0;
  padding-top: 5px;
  -moz-border-radius-bottomright: 10px;
  -webkit-border-bottom-right-radius: 10px;
  -moz-border-radius-bottomleft: 10px;
  -webkit-border-bottom-left-radius: 10px;
}
 
ul#nav li:hover > ul li a {
  float: left;
  font: normal 12px tahoma, arial;
  line-height: 45px;
  color: #fff;
  text-decoration: none;
  margin: 0;
  padding: 0 20px 0 0;
}
 
ul#nav li:hover > ul li a:hover {
  color: white;
  text-decoration: underline;
  text-shadow: none;

Liebe Grüße & vielen Dank im Voraus!

 

[cythux]

AW: CSS Dropdown/Dropline Navigation aufgeklappt lassen

http://net.tutsplus.com/tutorials/h...o-build-a-kick-butt-css3-mega-drop-down-menu/

http://designmodo.com/create-css3-mega-menu/

http://www.designchemical.com/lab/jquery-mega-drop-down-menu-plugin/getting-started/