Beiträge von azo8888

azo8888

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.

azo8888

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

azo8888

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.

azo8888

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 http://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;
}

Alles anzeigen

Danke !

Gruss
azo

azo8888

Hat sich erledigt, vielen Dank für die Lösung. Hat Prima geklappt.

Gruss

azo8888

Könntest Du mir bitte ein Beispiel in meinem Code zeigen bzw. geben? Ich weiß nicht was Du meinst. Bin Anfänger. Sorry

azo8888

http://www.ketec-elektrotechnik.at

Hier habe ich ein Untermenü gemacht.

Gruss

azo8888

Hallo zusammen,

ich habe ein Horizontales Menü gebastelt. Sobald ich jedoch ein Untermenüpunkt anlege verändert sich die Größe von dem Hauptmenü.
Kann mir jemand sagen wie ich den Fehler beheben kann?

Kann evtl. auch Screenshots machen von dem Problem.

Danke im Voraus.

Gruss
azo

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 {
    border-left: 1px solid #fff;
    border-top: 1px solid #dFeEFF; /* fallback colour must use full shorthand */
    border-top: 1px solid rgba(255,255,255,.5);
    padding: .75em 1em;
    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;
}

Alles anzeigen

Beiträge von azo8888

CSS - Menüpunkte verschwinden sobald die Maus drauf ist

CSS - Menüpunkte verschwinden sobald die Maus drauf ist

CSS - Menüpunkte verschwinden sobald die Maus drauf ist

CSS - Menüpunkte verschwinden sobald die Maus drauf ist

CSS - Probleme beim hinzufügen von einem Untermenü

CSS - Probleme beim hinzufügen von einem Untermenü

CSS - Probleme beim hinzufügen von einem Untermenü

CSS - Probleme beim hinzufügen von einem Untermenü