Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „CSS Dropdown/Dropline Navigation aufgeklappt lassen“

xero7

» Unterdrück(t)er

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:

HTML:
<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>
HTML:
.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!
 

Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Statistik des Forums

Themen
175.155
Beiträge
2.581.853
Mitglieder
67.221
Neuestes Mitglied
opaklaus
Oben