Ergebnis 1 bis 7 von 7

Thema: CSS - Probleme beim hinzufügen von einem Untermenü

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

    Standard CSS - Probleme beim hinzufügen von einem Untermenü

    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;
    }
    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 - Probleme beim hinzufügen von einem Untermenü

    Hast du mal einen Link, damit man sich das ansehen kann. Zur Not reicht auch ein Freehoster, wenn du keinen Webspace hast.

  3. #3
    HTML Newbie
    Themenstarter

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

    Standard AW: CSS - Probleme beim hinzufügen von einem Untermenü

    www.ketec-elektrotechnik.at

    Hier habe ich ein Untermenü gemacht.

    Gruss

  4. #4
    Bandit
    Gast

    Standard AW: CSS - Probleme beim hinzufügen von einem Untermenü

    Deine Links haben alle ein Padding, aber dein Eintrag "Hauptmenü" nicht. Du solltest besser den li-Elementen ein Padding verpassen

  5. #5
    HTML Newbie
    Themenstarter

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

    Standard AW: CSS - Probleme beim hinzufügen von einem Untermenü

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

  6. #6
    Bandit
    Gast

    Standard AW: CSS - Probleme beim hinzufügen von einem Untermenü

    Bei
    Code:
    .sf-vertical li
    schreibst du z.B. rein:
    Code:
    padding: 5px;
    Und bei
    Code:
    .sf-menu a
    nimmst du das padding raus

  7. #7
    HTML Newbie
    Themenstarter

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

    Standard AW: CSS - Probleme beim hinzufügen von einem Untermenü

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

    Gruss
    Geändert von azo8888 (27.12.2014 um 23:21 Uhr)

Ähnliche Themen

  1. teilnehmer zu einem event hinzufügen/entfernen
    Von synaptic im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 0
    Letzter Beitrag: 12.07.2009, 12:11
  2. Neuer Kontakt hinzufügen beim MSN
    Von im Forum Computer - Internet Forum
    Antworten: 18
    Letzter Beitrag: 26.12.2008, 12:17
  3. bild zentrieren beim Laden in einem iframe
    Von patr im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 22.12.2005, 22:40
  4. Beim klicken auf einem Link, erscheinen Unterpunkte
    Von taotao im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 07.12.2004, 22:46
  5. Sound beim anklicken von einem Link
    Von Gesa im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 08.05.2004, 22:02

Stichworte

Berechtigungen

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