CCS Menüleiste zum Aufklappen

Diskutiere CCS Menüleiste zum Aufklappen im CSS Forum im Bereich Programmierung; Ihr Lieben, ich bin noch sehr unerfahren im Bereich CSS und HTML und genau jetzt habe ich ein Problem. Ich habe eine Seite erstellt mit einer...
Neues Thema erstellen Antworten
  • CCS Menüleiste zum Aufklappen Beitrag #1
L
LittleSilly
Member
Beiträge
9
Punkte Reaktionen
0
Ihr Lieben,
ich bin noch sehr unerfahren im Bereich CSS und HTML und genau jetzt habe ich ein Problem.
Ich habe eine Seite erstellt mit einer Menüleiste im oberen Bereich. Diese Leiste ist zum Aufklappen, also bei überfahren mit der Maus öffnet sich ein Menü nach unten. Nun soll aber noch eine zweite Ebene erstellt werden, also wenn man mit der Maus über einen Menüpunkt auf der ersten Ebene kommt, soll sich ein zweites Untermenü öffnen aber leider funktioniert das nicht. Es wird einfach nicht angezeigt. Kann mir jemand helfen?
Ich kopiere es mal hier unten rein. Ich hoffe es blickt jemand durch.
Ich danke Euch schon mal im Voraus.

Indes-Seite Menü:

<!-- Nav -->
<nav id="nav">
<ul>
<li><a href="index.html">Home</a></li>
<li class="current"><a href="neugeraete.html">Neuger&auml;te</a>
<ul>
<li><a href="noblelift.html">Noblelift</a></li>
<ul>
<li><a href="noblelift.html">Manuelle und Semielektrische Hubwagen und Stapler</a></li>
<li><a href="noblelift.html">&Ouml;konomische Elektrohubwagen und Stapler</a></li>
<li><a href="noblelift.html">Professionelle Elektrohubwagen und Stapler</a></li>
<li><a href="noblelift.html">Schubmast- und Gegengewichtsstapler</a></li>
<li><a href="noblelift.html">Scheuersaugmaschinen</a></li>
<li><a href="noblelift.html">Kommissionierer, Schlepper</a></li>
<li><a href="noblelift.html">Hubtische, weiterer Werkstatt- und Industriebedarf</a></li>
<li><a href="noblelift.html">Scherenhubarbeitsbühnen</a></li>

</ul>
<li><a href="heli.html">Heli</a></li>

</ul>
</li>
<li><a href="alle-geb.html">Gebrauchtger&auml;te</a>
<ul>
<li><a href="frontstapler-geb.html">Frontstapler</a></li>
<li><a href="lagertechnik-geb.html">Lagertechnik</a></li>
<li><a href="arbeitsbuehnen-geb.html">Arbeitsb&uuml;hnen</a></li>
<li><a href="sonstiges-geb.html">Sonstiges</a></li>
</ul>
</li>
<li><a href="alle-miet.html">Mietger&auml;te</a>
<ul>
<li><a href="frontstapler-miet.html">Frontstapler</a></li>
<li><a href="lagertechnik-miet.html">Lagertechnik</a></li>
<li><a href="arbeitsbuehnen-miet.html">Arbeitsb&uuml;hnen</a></li>
<li><a href="sonstiges-miet.html">Sonstiges</a></li>
</ul>
</li>
<li><a href="fahrerschulung.html">Fahrerschulung</a></li>
<li><a href="service.html">Service</a>
<ul>
<li><a href="uvv.html">Uvv und Fem</a></li>
<li><a href="wartung.html">Wartung und Reparatur</a></li>
<li><a href="reifenservice.html">Reifenservice</a></li>
<li><a href="ersatzteile.html">Ersatzteile</a></li>
<li><a href="batterie.html">Batterie</a></li>
<li><a href="sonderanbauten.html">Sonderanbauten</a></li>
<li><a href="finanzierung.html">Finanzierung</a></li>
</ul>
</li>
<li><a href="unternehmen.html">Unternehmen</a>
<ul>
<li><a href="ueberuns.html">&Uuml;ber uns</a></li>
<li><a href="aktuelles.html">Aktuelles</a></li>
<li><a href="stellen.html">Stellenangebote</a></li>
<li><a href="partner.html">Partner</a></li>

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


Und hier das CSS:

/* Nav */

body {
padding-top: 3.25em;
}

#nav {
position: fixed;
top: 0;
left: 0;
z-index: 1000;
background-color: #575758;
background-image: url("images/overlay.png");
width: 100%;
height: 3.25em;
line-height: 3.25em;
text-align: center;
font-family: 'Open Sans Condensed', sans-serif;
font-weight: 700;
text-transform: uppercase;
cursor: default;
}

#nav ul {
position: relative;
z-index: 1001;
}

#nav li {
display: inline-block;
margin: 0 0.5em 0 0.5em;
top: 0;
position: relative;
-moz-transition: top .15s ease-in-out;
-webkit-transition: top .15s ease-in-out;
-o-transition: top .15s ease-in-out;
-ms-transition: top .15s ease-in-out;
transition: top .15s ease-in-out;
}

#nav li > ul {
display: none;
}

#nav li a, #nav li span {
-moz-transition: background-color .075s ease-in-out, color .075s ease-in-out;
-webkit-transition: background-color .075s ease-in-out, color .075s ease-in-out;
-ms-transition: background-color .075s ease-in-out, color .075s ease-in-out;
transition: background-color .075s ease-in-out, color .075s ease-in-out;
position: relative;
display: block;
text-decoration: none;
color: #ffdf00 ;
top: -6px;
padding: 4px 1.5em 0.25em 1.5em;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
outline: 0;
}

#nav li:hover, #nav li.active {
top: 3px;
}

#nav li:hover a, #nav li:hover span {
background: #000;
color: #fff;
}

#nav li.active a, #nav li.active span {
background: #000;
color: #fff;
}

#nav li.current a {
background: #000;
color: #fff;
 
  • CCS Menüleiste zum Aufklappen Beitrag #3
L
LittleSilly
Member
Beiträge
9
Punkte Reaktionen
0
Hey, vielen Dank schon mal.
Das ist eine sehr gute Beschreibung. Leider geht es nicht bei mir oder ich versteh es nicht oder ich finde den Fehler nicht.
Ich bin einfach noch zu doof dazu ;-)
 
  • CCS Menüleiste zum Aufklappen Beitrag #4
S
scatello
Well-known member
Beiträge
528
Punkte Reaktionen
44
Du brauchst doch nur den HTML- und CSS-Code kopieren und deine Links eintragen. Eventuell noch Farben anpassen und gut ist.
 
  • CCS Menüleiste zum Aufklappen Beitrag #5
L
LittleSilly
Member
Beiträge
9
Punkte Reaktionen
0
Nein, ich hab ja die Seite schon fertig und auch die Navigation und das möchte ich auch so beibehalten. Es funktioniert ja auch, nur wird die zweite Ebene nicht angezeigt.
 
  • CCS Menüleiste zum Aufklappen Beitrag #8
L
LittleSilly
Member
Beiträge
9
Punkte Reaktionen
0
Hm, das mach ich, hilft mir aber erstmal nicht wirklich weiter.
Danke trotzdem.
 
  • CCS Menüleiste zum Aufklappen Beitrag #9
S
scatello
Well-known member
Beiträge
528
Punkte Reaktionen
44
Wenn man sich mal die Mühe macht, den HTML-Code ordentlich zu formatieren, fallen zwei Fehler sofort auf:
HTML: 
<nav id="nav">
    <ul>
        <li><a href="index.html">Home</a></li>
        <li class="current"><a href="neugeraete.html">Neuger&auml;te</a>
            <ul>
                <li><a href="noblelift.html">Noblelift</a></li>
                    <ul>
                        <li><a href="noblelift.html">Manuelle und Semielektrische Hubwagen und Stapler</a></li>
                        <li><a href="noblelift.html">&Ouml;konomische Elektrohubwagen und Stapler</a></li>
                        <li><a href="noblelift.html">Professionelle Elektrohubwagen und Stapler</a></li>
                        <li><a href="noblelift.html">Schubmast- und Gegengewichtsstapler</a></li>
                        <li><a href="noblelift.html">Scheuersaugmaschinen</a></li>
                        <li><a href="noblelift.html">Kommissionierer, Schlepper</a></li>
                        <li><a href="noblelift.html">Hubtische, weiterer Werkstatt- und Industriebedarf</a></li>
                        <li><a href="noblelift.html">Scherenhubarbeitsbühnen</a></li>
                    </ul>
                <!-- ********************************* Hier fehlt was ********************************* -->
                <li><a href="heli.html">Heli</a></li>
            </ul>
        </li>
        <li><a href="alle-geb.html">Gebrauchtger&auml;te</a>
            <ul>
                <li><a href="frontstapler-geb.html">Frontstapler</a></li>
                <li><a href="lagertechnik-geb.html">Lagertechnik</a></li>
                <li><a href="arbeitsbuehnen-geb.html">Arbeitsb&uuml;hnen</a></li>
                <li><a href="sonstiges-geb.html">Sonstiges</a></li>
             </ul>
        </li>
        <li><a href="alle-miet.html">Mietger&auml;te</a>
            <ul>
                <li><a href="frontstapler-miet.html">Frontstapler</a></li>
                <li><a href="lagertechnik-miet.html">Lagertechnik</a></li>
                <li><a href="arbeitsbuehnen-miet.html">Arbeitsb&uuml;hnen</a></li>
                <li><a href="sonstiges-miet.html">Sonstiges</a></li>
            </ul>
        </li>
        <li><a href="fahrerschulung.html">Fahrerschulung</a></li>
        <li><a href="service.html">Service</a>
            <ul>
                <li><a href="uvv.html">Uvv und Fem</a></li>
                <li><a href="wartung.html">Wartung und Reparatur</a></li>
                <li><a href="reifenservice.html">Reifenservice</a></li>
                <li><a href="ersatzteile.html">Ersatzteile</a></li>
                <li><a href="batterie.html">Batterie</a></li>
                <li><a href="sonderanbauten.html">Sonderanbauten</a></li>
                <li><a href="finanzierung.html">Finanzierung</a></li>
            </ul>
        </li>
        <li><a href="unternehmen.html">Unternehmen</a>
            <ul>
                <li><a href="ueberuns.html">&Uuml;ber uns</a></li>
                <li><a href="aktuelles.html">Aktuelles</a></li>
                <li><a href="stellen.html">Stellenangebote</a></li>
                <li><a href="partner.html">Partner</a></li>
            </ul>
        <!-- ********************************* Hier fehlt was ********************************* -->
        <li><a href="kontakt.html">Kontakt</a></li>
    </ul>
</nav>
 
  • CCS Menüleiste zum Aufklappen Beitrag #10
L
LittleSilly
Member
Beiträge
9
Punkte Reaktionen
0
aaaaaaaaaaaaah, vielen Dank, das war der entscheidende Tipp, ich hab den Fehler gefunden.
Oben fehlt nichts, sondern es steht an der falschen Stelle. Das End-Tag </li> steht mit oben auf der Zeile.
Supi, ich freu mich. Danke
 
  • CCS Menüleiste zum Aufklappen Beitrag #11
W
Werner123
Member
Beiträge
10
Punkte Reaktionen
2
Arbeitsb&uuml;hnen, Gebrauchtger&auml;te ... warum werden Umlaute verstümmelt? Wenn alles in UTF-8 ist dann braucht man diese Umlaut-Kodierung nicht. Frag mal Tante Google wie das bei deinem Programm zu lösen ist.
 
Thema:

CCS Menüleiste zum Aufklappen

Oben Unten