Ergebnis 1 bis 7 von 7

Thema: CSS - Menüpunkte verschwinden sobald die Maus drauf ist

  1. #1
    HTML Newbie
    Registriert seit
    27.12.2014
    Beiträge
    8
    Danke
    3
    Bekam 0 mal "Danke" in 0 Postings

    Standard CSS - Menüpunkte verschwinden sobald die Maus drauf ist

    Hallo zusammen,

    hab schon wieder ein kleines Problem bei meinem Menü.
    Und zwar - bei allen Menüpunkte die ohne Untermenü gemacht wurden verschwindet der Text aus dem Menü sobald die Maus ein bisschen ausserhalb von dem Text ist. (siehe Beispiel www.ketec-elektrotechnik.at)

    CSS CODE:

    Code:
    /*** ESSENTIAL STYLES ***/
    .sf-menu, .sf-menu * {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .sf-menu li {
        position: relative;
    }
    /* Ausrichten von dem Menü links */
    .sf-menu ul {
        position: absolute;
        display: none;
        top: 100%;
        left: 0;
        z-index: 99;
        
        
    }
    
    .sf-menu > li {
        float: left;
    }
    /* Untermenü anzeigen */
    .sf-menu li:hover > ul,
    .sf-menu li.sfHover > ul {
        display: block;
        
    }
    
    .sf-menu a {
        display: block;
        position: relative;
        
    }
    .sf-menu ul ul {
        top: 0;
        left: 100%;
    }
    
    
    /*** DEMO SKIN ***/
    .sf-menu {
        float: left;
        margin-bottom: 1em;
    }
    .sf-menu ul {
        box-shadow: 2px 2px 6px rgba(0,0,0,.2);
        min-width: 12em; /* allow long menu items to determine submenu width */
        *width: 12em; /* no auto sub width for IE7, see white-space comment below */
    }
    .sf-menu a {
        
        text-decoration: none;
        zoom: 1; /* IE7 */
    }
    
    .sf-menu a {
    /*Menüschriftfarbe */
        color: #EFEFEF;
    }
    .sf-menu a:hover {
    /* Schrifthintergrund beim bewegen der Maus auf den Button */
        color: #1d1d1b;
    }
    
    .sf-menu li {
    /*Hintergrundsfarbe Menü links */
        background: #828282;
        white-space: nowrap; /* no need for Supersubs plugin */
        *white-space: normal; /* ...unless you support IE7 (let it wrap) */
        -webkit-transition: background .2s;
        transition: background .2s;
    }
    .sf-menu ul li {
    /*Hintergrundsfarbe Menü - Untermenü 1 */
        background: #828282;
    }
    .sf-menu ul ul li {
        background: #9AAEDB;
    }
    .sf-menu li:hover,
    .sf-menu li.sfHover {
        background: #EFEFEF;
        /* only transition out, not in */
        -webkit-transition: none;
        transition: none;
    }
    
    /*** arrows (for all except IE7) **/
    .sf-arrows .sf-with-ul {
        padding-right: 2.5em;
        *padding-right: 1em; /* no CSS arrows for IE7 (lack pseudo-elements) */
    }
    /* styling for both css and generated arrows */
    .sf-arrows .sf-with-ul:after {
        content: '';
        position: absolute;
        top: 50%;
        right: 1em;
        margin-top: -3px;
        height: 0;
        width: 0;
        /* order of following 3 rules important for fallbacks to work */
        border: 5px solid transparent;
        border-top-color: #dFeEFF; /* edit this to suit design (no rgba in IE8) */
        border-top-color: rgba(255,255,255,.5);
    }
    .sf-arrows > li > .sf-with-ul:focus:after,
    .sf-arrows > li:hover > .sf-with-ul:after,
    .sf-arrows > .sfHover > .sf-with-ul:after {
        border-top-color: white; /* IE8 fallback colour */
    }
    /* styling for right-facing arrows */
    .sf-arrows ul .sf-with-ul:after {
        margin-top: -5px;
        margin-right: -3px;
        border-color: transparent;
        border-left-color: #dFeEFF; /* edit this to suit design (no rgba in IE8) */
        border-left-color: rgba(255,255,255,.5);
    }
    .sf-arrows ul li > .sf-with-ul:focus:after,
    .sf-arrows ul li:hover > .sf-with-ul:after,
    .sf-arrows ul .sfHover > .sf-with-ul:after {
        border-left-color: white;
    }
    Danke !

    Gruss
    azo
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Bandit
    Gast

    Standard AW: CSS - Menüpunkte verschwinden sobald die Maus drauf ist

    Der Text verschwindet nicht, der bekommt nur die gleiche Farbe wie der Hintergrund. Da musst du mal sehen, was bei hover so alles passiert.

  3. Folgende User finden die Antwort von Bandit gut:


  4. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    27.12.2014
    Beiträge
    8
    Danke
    3
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: CSS - Menüpunkte verschwinden sobald die Maus drauf ist

    sorry aber ich finde den Fehler nicht. Weil wenn die Maus direkt auf dem Menütext steht dann ist alles normal - sobald aber die Maus ein bisschen von Text wegbewegt wird verändert sich die Farbe. Das ist aber nur so, wenn kein Untermenü erzeugt wurde.

  5. #4
    Bandit
    Gast

    Standard AW: CSS - Menüpunkte verschwinden sobald die Maus drauf ist

    Ich empfehle dir den Firefox mit installiertem Addon Firebug, damit kann man sehen, welche CSS-Eigenschaften die Elemente haben und man kann auch selbst darin CSS-Code zum Testen ändern

  6. Folgende User finden die Antwort von Bandit gut:


  7. #5
    HTML Newbie
    Themenstarter

    Registriert seit
    27.12.2014
    Beiträge
    8
    Danke
    3
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: CSS - Menüpunkte verschwinden sobald die Maus drauf ist

    Firebug habe ich installiert. Glaube ich habe was gefunden. jetzt verändert sich die Farbe nicht mehr auf weiß damit man sie nicht mehr sieht. Aber funktieren tut es immer noch nicht richtig
    Geändert von azo8888 (28.12.2014 um 10:41 Uhr)

  8. #6
    Bandit
    Gast

    Standard AW: CSS - Menüpunkte verschwinden sobald die Maus drauf ist

    Mit Firebug findet man das aber!!! Man muss sich als Anfänger vielleicht etwas mehr Mühe geben, aber machbar ist das.

    Mach mal aus
    Code:
    .sf-vertical li:hover {
    
        color: #1d1d1b;
    
    
    }
    das hier
    Code:
    .sf-vertical li:hover a {
        color: #1d1d1b;
    
    
    }

  9. Folgende User finden die Antwort von Bandit gut:


  10. #7
    HTML Newbie
    Themenstarter

    Registriert seit
    27.12.2014
    Beiträge
    8
    Danke
    3
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: CSS - Menüpunkte verschwinden sobald die Maus drauf ist

    Vielen Dank! Problem behoben - Naja dann habe ich wohl falsch geschaut - nehme mal an das es an der Übung fehlt Jetzt funktioniert mein Menü so wie es sein soll.

Ähnliche Themen

  1. Antworten: 3
    Letzter Beitrag: 06.04.2014, 21:01
  2. Möchte EMail bekommen, sobald neue daten in tabellele von Mysql vorhanden sind!
    Von gixnetwork im Forum Datenbank Forum - MySQL und andere Datenbanksoftware
    Antworten: 7
    Letzter Beitrag: 28.04.2013, 20:18
  3. Menüpunkte weg bei wbb 1.0.2
    Von Dominikgt im Forum Webanwendungen - Webapplikationen
    Antworten: 2
    Letzter Beitrag: 13.08.2007, 09:33
  4. Menüpunkte ,,fixen"
    Von arnim im Forum HTML & CSS Forum
    Antworten: 13
    Letzter Beitrag: 13.06.2007, 16:26
  5. Media Player startet sobald man auf einen Link klickt
    Von wurmax im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 27.07.2006, 12:16

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •