CSS Dropdown/Dropline Navigation aufgeklappt lassen

[Tab]

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.



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!

 

[Split1989]

hab einwenig rumprobiert und folgende css sollte genau das tun was du suchst


geändert wurde:

ul#nav:not(:hover) li:first-child > ul{
  padding-top: 5px;
  margin: 40px 0 0 0;
  position: absolute;
  display: block;
}
 
ul#nav li:hover > ul li a, ul#nav li:first-child > ul li a {
  float: left;
  font: normal 12px tahoma, arial;
  line-height: 45px;
  color: #f00;
  text-decoration: none;
  margin: 0;
  padding: 0 20px 0 0;
}

das first-child wird sichtbar wenn kein anderes Element den zustand :hover hat =)

.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:not(:hover) li:first-child > ul{
  padding-top: 5px;
  margin: 40px 0 0 0;
  position: absolute;
  display: block;
}
 
ul#nav li:hover > ul li a, ul#nav li:first-child > ul li a {
  float: left;
  font: normal 12px tahoma, arial;
  line-height: 45px;
  color: #f00;
  text-decoration: none;
  margin: 0;
  padding: 0 20px 0 0;
}
 
ul#nav li:hover > ul li a:hover {
  color: #f00
  text-decoration: underline;
  text-shadow: none;