Markup (HTML, XML, etc.) und CSS - Forum

Derzeit sind Sie als Gast in unserem Forum aktiv. Für das Schreiben registrieren Sie sich bitte. Unser Forum ist eine Austauschplattform für Webworker zum Kommunizieren, Helfen, Informieren und Hilfe finden. Auf der rechten Seiten finden Sie eine Forenübersicht über alle Bereiche des Webmaster-Forums. Unterhalb finden Sie alle aktuellen Themen.

In diesem Forum sollen begleitend zu unserem CSS Portal und HTML-Bereich konkrete Fragen zu HTML und CSS diskutiert werden. Bitte immer die Suchfunktion nutzen bevor du eine Frage stellst.


Paddel
Beiträge: 1

PN schreiben
Profil ansehen
User ist offline

Navigation Unterseiten nur ausblenden bei hover effekt

Link zur Antwort auf "Navigation Unterseiten nur ausblenden bei hover effekt" von Paddel Paddel, am Sonntag den 23.05.2010 um 16:18:36

Hallo liebe Comunity, auf der Suche nach Unterstützung bei meiner Bastelei bin ich auf euer Forum gestossen und habe auch gleich mein erstes Anliegen:


Ich habe mir eine kleine XHTML Konforme Navigation mit meinem bisherigen Wissen gebatselt. Nun sollen aber die Untermenü Punkte nur bei Hovereffekt ausgefahren werden und das Praktisch bei jeder Oberkategorie(2,3,4,..). Vielleicht kann mir da mal jemand weiterhelfen, für meine Verhältnisse habe ich es schon recht gut hinbekommen. Auch bei bekannten nachschlageseiten wie Listmatic oder ähnliches habe ich so etwas nicht gefunden.

Mein XHTML und Css Code sieht so aus:

 
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<ul id="menu">
    <li id="active"><a href="" id="current">START</a> 
        <ul id="menu2">
            <li id="subactive"><a href="" id="subcurrent">UNTERSEITE 1 </a></li>
            <li><a href="">UNTERSEITE 2</a></li>
            <li><a href="">UNTERSEITE 3</a></li>
            <li><a href="">UNTERSEITE 4</a></li>
            </ul>
    </li>
    <li><a href="">Kategorie 2</a></li>
    <li><a href="">Kategorie 3</a></li>
        <li><a href="">Kategorie 4</a></li>
        <li><a href="">Kategorie 5</a></li>
</ul>

 
css
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
* {margin: 0; padding: 0;}
    
ul#menu li {list-style-type: none;}

ul#menu {
    font-family: calibri, arial, verdana;
    margin-left: 30px; 
    }

ul#menu li {margin: 0 0 1px 0;}

ul#menu a {
    display: block;
    padding: 5px 10px;
    width: 140px;
    color: #fff;
    background: #036;
    text-decoration: none;
    }

ul#menu a:hover {
    color: #fff;
    background: #69c;
    text-decoration: none;
    }

ul#menu ul ul li {
    margin: 0 0 1px 0;
    }

ul#menu ul a {
    display: block;
    padding: 5px 5px 5px 30px;
    width: 125px;
    color: #fff;
    background: #369;
    text-decoration: none;
    }

ul#menu ul a:hover {
    color: #fff;
    background: #69c;
    text-decoration: none;
    }


Jola
Beiträge: 48

PN schreiben
Profil ansehen
User ist offline
Link zur Antwort auf "Navigation Unterseiten nur ausblenden bei hover effekt" von Jola Jola, am Sonntag den 23.05.2010 um 20:43:43

Du kannst Dabei Javascript verdenden, oder nur CSS. Mit JS und z.B. jQuery ist es etwas einfacher und schöner, hat aber den Nachteil, das es eben nicht ohne JS funktioniert.

Bei nur CSS ist die Frage:

Soll die Navigation auch im MSIE6 funktionieren?

Du könntest li:hover > ul verwenden um die Unterliste ein und aus zu blenden. Aber das unterstützt der MSIE6 nicht.