Ergebnis 1 bis 5 von 5
  1. #1
    Avatar von opiWahn
    opiWahn ist offline Mitglied
    registriert
    20-01-2011
    Ort
    zw. KL und MA
    Beiträge
    25

    DropDownMenue auf 3. Ebene erweitern

    Hallo,

    ich hab hier ein sehr schönes DropDownMenue, das fast schon zum Einbauen fertig ist - aber eben nur fast.
    Wo bzw. wie muß ich das CSS anpassen um dem ganzen auch noch Unterpunkte bei zu bringen, die sich dann seitlich daneben zeigen?
    Im Prinzip bin ich, glaub ich, garnicht soweit vom Ziel entfernt. Denoch bleibt mir die 3. Ebene sichtbar auf der Zweiten liegen. Ziel ist aber, daß sie erst beim hover sichtbar wird. Ich habe mir schon einige Teile angeschaut, aber offensichtlich gibt es hierfür keine Standardlösung. Etwas verwirrt habe ich schon mindestens 3-4 relativ unterschiedliche Ansätze gesehen.

    HTML
    PHP-Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
    >
    <
    html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <
    head>
        <
    meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <
    title></title>
        <
    link rel="stylesheet" href="menu_style.css" type="text/css" />
    </
    head>
    <
    body>
        <
    div class="menu">
            <
    ul>
                <
    li><a href="#" >Home</a></li>
                <
    li><a href="#" id="current">Seite 1</a>
                    <
    ul>
                        <
    li><a href="#">Seite 1.1</a>
                            <
    ul>
                               <
    li><a href="#">Seite 1.1.1</a></li>
                               <
    li><a href="#">Seite 1.1.2</a></li>
                            </
    ul>
                        </
    li>
                        <
    li><a href="#">Seite 1.2</a>
                            <
    ul>
                               <
    li><a href="#">Seite 1.2.1</a></li>
                               <
    li><a href="#">Seite 1.2.2</a></li>
                            </
    ul>
                        </
    li>
                        <
    li><a href="#">Seite 1.3</a>
                            <
    ul>
                               <
    li><a href="#">Seite 1.3.1</a></li>
                               <
    li><a href="#">Seite 1.3.2</a></li>
                            </
    ul>
                        </
    li>
                        <
    li><a href="#">Seite 1.4</a></li>
                   </
    ul>
                  </
    li>
                  <
    li><a href="#">Seite 2</a>
                    <
    ul>
                        <
    li><a href="#">Seite 2.1</a></li>
                        <
    li><a href="#">Seite 2.2</a></li>
                        <
    li><a href="#">Seite 2.3</a></li>
                        <
    li><a href="#">Seite 2.4</a></li>
                    </
    ul>
                  </
    li>
                <
    li><a href="kontakt.html">Kontakt</a></li>
            </
    ul>
        </
    div>
    </
    body>
    </
    html
    CSS
    PHP-Code:
    .menu{
        
    border:none;
        
    border:0px;
        
    margin:0px;
        
    padding:0px;
        
    font-family:verdana,geneva,arial,helvetica,sans-serif;
        
    font-size:14px;
        
    font-weight:bold;
        
    color:8e8e8e;
        }
        
    .
    menu ul{
        
    background:url(images/menu-bg.giftop left repeat-x;
        
    height:43px;
        list-
    style:none;
        
    margin:0;
        
    padding:0;
        }
            
        .
    menu li{
            
    float:left;
            
    padding:0px 8px 0px 8px;
            }
            
        .
    menu li a{
            
    color:#666666;
            
    display:block;
            
    font-weight:bold;
            
    line-height:43px;
            
    padding:0px 25px;
            
    text-align:center;
            
    text-decoration:none;
            }
            
            .
    menu li a:hover{
                
    color:#000000;
                
    text-decoration:none;
                }
                
        .
    menu li ul{
            
    background:#e0e0e0;
            
    border-left:2px solid #f68618;
            
    border-right:2px solid #f68618;
            
    border-bottom:2px solid #f68618;
            
    display:none;
            
    height:auto;
            
    filter:alpha(opacity=95);
            
    opacity:0.95;
            
    position:absolute;
            
    width:225px;
            
    z-index:200;
            
    /*top:1em;
            /*left:0;*/
            
    }
            
        .
    menu li:hover ul{
            
    display:block;
            }
            
        .
    menu li li {
            
    display:block;
            
    float:none;
            
    padding:0px;
            
    width:225px;
            }
            
        .
    menu li ul a{
            
    display:block;
            
    font-size:12px;
            
    font-style:normal;
            
    padding:0px 10px 0px 15px;
            
    text-align:left;
            }
            
            .
    menu li ul a:hover{
                
    background:#949494;
                
    color:#000000;
                
    opacity:1.0;
                
    filter:alpha(opacity=100);
                }
                
        .
    menu p{
            
    clear:left;
            }    
            
        .
    menu #current{
            
    background:url(images/current-bg.giftop left repeat-x;
            
    color:#ffffff;
            

    Der gesamte Code mit img. liegt als zip bei.

    Danke schon mal im Voraus

    opiWahn
    Angehängte Dateien Angehängte Dateien

  2. #2
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.695

    AW: DropDownMenue auf 3. Ebene erweitern

    Code:
    	.menu li:hover > ul{
    		display:block;
    		}
    	.menu li li ul {
    		position: absolute;
    		top: 0;
    		left: 100%;
    	}
    Zeile 56 ff ersetzten.

  3. #3
    Avatar von opiWahn
    opiWahn ist offline Mitglied
    registriert
    20-01-2011
    Ort
    zw. KL und MA
    Beiträge
    25

    AW: DropDownMenue auf 3. Ebene erweitern

    Hallo kkapsner,

    vielen Dank für deine Unterstützung - es funktioniert
    Die Sache mit dem > ist mir neu! Was bewirkt diese Anweisung?
    Ein kleiner Wurm scheint noch drin zu sein:
    Damit alle Einträge untereinander dagestellt werden habe ich in Zeile 50 die Breite auf 125px gesetzt.
    Jedoch komme ich mit der Maus nicht auf die 3. Ebene. Sobald ich versuche rüber zu gehen blendet sich das Fenster wieder aus!?

    Grüße
    opiWahn

  4. #4
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.695

    AW: DropDownMenue auf 3. Ebene erweitern

    Ah - ich hab' was vergessen
    Code:
    		
    	.menu li li {
    		display:block;
    		float:none;
    		padding:0px;
    		width:225px;
    		position: relative;
    		}
    - das position: relative;

  5. #5
    djheke ist offline Mitglied
    registriert
    04-04-2011
    Beiträge
    28

    AW: DropDownMenue auf 3. Ebene erweitern

    Zitat Zitat von opiWahn Beitrag anzeigen
    Hallo kkapsner,

    vielen Dank für deine Unterstützung - es funktioniert
    Die Sache mit dem > ist mir neu! Was bewirkt diese Anweisung?
    Ein kleiner Wurm scheint noch drin zu sein:
    Damit alle Einträge untereinander dagestellt werden habe ich in Zeile 50 die Breite auf 125px gesetzt.
    Jedoch komme ich mit der Maus nicht auf die 3. Ebene. Sobald ich versuche rüber zu gehen blendet sich das Fenster wieder aus!?

    Grüße
    opiWahn
    Schön das es funktioniert. Wenn du dieses Thema schon in verschiedenen Foren Postest, dann gib bescheid das du eine Lösung gefunden hast.
    Übrigens. Es ist sehr unhöflich gleiche Themen in verschiedenen Foren zu posten. Denn damit stellst du die Kompetenz der Helfer in Frage. Somal deine Grundlagen in Sachen HTML + CSS sehr gering sind. Also erst mal Grundlagen lernen.

Ähnliche Themen

  1. Dropdownmenue mit Bild?
    Von randyorton81 im Forum JavaScript
    Antworten: 2
    Letzter Beitrag: 01-06-2010, 16:04
  2. probleme mit dropdownmenue
    Von Jolle im Forum JavaScript
    Antworten: 2
    Letzter Beitrag: 08-11-2007, 21:10
  3. Homepage Background (Bild) im Dropdownmenue auswaehlen
    Von MeisterEder im Forum Allgemeines
    Antworten: 23
    Letzter Beitrag: 18-07-2007, 17:42
  4. Homepage Background (Bild) im Dropdownmenue auswaehlen
    Von MeisterEder im Forum JavaScript
    Antworten: 17
    Letzter Beitrag: 14-07-2007, 11:16
  5. Antworten: 7
    Letzter Beitrag: 29-09-2004, 08:36

Lesezeichen

Berechtigungen

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