Ergebnis 1 bis 4 von 4

Thema: css menu auf andere ebene

  1. #1
    HTML Newbie
    Registriert seit
    24.04.2016
    Beiträge
    2
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

    Standard css menu auf andere ebene

    Hallo bin neu hier, erfahren in html, css aber kein profie, deswegen kommt gleich mal eine frage von mir, ich hab schon ewig gesucht nach meinem problem. ... wenn ich das menu so aufgebaut habe und zb bei "other bookmarks" ein längeres menu hätte und mit der maus runterfahre überschneidet sich die 2 "menu" von unten, probiert mal bitte selber aus!! hat jemand eine lösung wie ich das lösen kann?
    /test
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <style type="text/css">
    body {
            font: normal 1em Helvetica, Arial, sans-serif;
            background-color:#000000;
            background:url(bgrep.png) repeat-x;
    }
    nav { width: 500px;
          height: 100px;
          padding: 0px;
          border: 0px solid black;
          margin:0px auto;
    
    
    
          }
    
    
    h1 {
      color:black;   /* Farbe orange */
      font-size:28pt;  /* Größe 28pt   */
      font-family:arial, "lucida console", sans-serif; /* Schriftart */
      text-align:center;
    }
    
    
    nav ul {
            margin: 0;
            padding: 0;
            text-align: center;
            background-color:;
    }
    
    nav li {
            list-style: none;
            float: left;
            width: 80px;
            position: relative;
            margin: 0.5em;
    
            padding: 0;
            background-color:;
    }
    
    nav ul ul {
            margin: 0.4em 0 0;
            padding: 0;
            position: absolute;
            top: 1.7em;
            left: -0.4em;
            margin: 0;
    
            padding: 0;
            position: absolute;
            top: 1.7em;
            font: 0/0 serif;/* Unternavigation ausblenden */
            z-index: -1;
    }
    
    nav ul ul li {
    
            float: none;
            display: block;
            margin-bottom: 0.0em;
            margin-top: 0;
    }
    
     nav a,
    nav span {
    
             font-size: 13px;
            display: block;
            width: 80px;
            margin: 1px;
            padding: 0.3em;
            text-decoration: none;
            font-weight: bold;
            border: 1px solid green;
            border-radius: 10px 5px 10px 5px;
    
            color: green;
            background-color: black;
            -webkit-transition: all .25s ease-in;
            transition: all .25s ease-in;
    }
    
      nav a {
        color: green;
    
        background-color: #000;
        transition: background-color .25s ease-in;
      }
    
      nav a:focus, nav a:hover, nav span {
        color: black;
        background-color: green;
        transition: background-color 0.01s;
      }
    
    
    nav ul li:hover ul {
      font: inherit;
      z-index: auto;   /*  Unternavigation einblenden */
    }
    
    </style>
    <title></title>
    
    </head>
    <body style="background-color:#000;">
     <h1>Bookmarks</h1>
    <div id="center" style=" width:100%;margin:1% 0% 0% 0%;text-align:center;border: 0px solid green; ">
        <form>
                                    <input style="width:200px; type="text" placeholder="Search..." required>
                                    <input type="button" value="Search">
    </form>
    <div style=" width:600px;margin:0px auto;text-align:center;border: 0px solid green;background:url(raster.png) repeat; ">
     <nav >
            <ul>
                    <li><a href="#Beispiel">Downloads</a>
                    </li>
                    <li><a href="#Beispiel">Other Bookmarks</a>
                            <ul>
                                    <li><a href="#Beispiel">Seite 2a</a>
                                    </li>
                                    <li><a href="#Beispiel">Seite 2b</a>
                                    </li>
                                       <li><a href="#Beispiel">Seite 2a</a>
                                    </li>
                                    <li><a href="#Beispiel">Seite 2b</a>
                                    </li>   <li><a href="#Beispiel">Seite 2a</a>
                                    </li>
                                    <li><a href="#Beispiel">Seite 2b</a>
                                    </li>   <li><a href="#Beispiel">Seite 2a</a>
                                    </li>
                                    <li><a href="#Beispiel">Seite 2b</a>
                                    </li>
                            </ul>
                    </li>
                    <li><a href="#Beispiel">APPS Portable FreeStuff usw</a>
                    </li>
                    <li><a href="#Beispiel">Web</a>
                            <ul>
                                    <li><a href="#Beispiel">Ect.</a>
                                    </li>
                                    <li><a href="#Beispiel">Seite 4c</a>
                                    </li>
                            </ul>
                    </li>
                    <li><a href="#Beispiel">Seite 5</a>
                    </li>
            </ul>
    </nav>
     <nav>
            <ul>
                    <li><a href="#Beispiel">Seite 1</a>
                    </li>
                    <li><a href="#Beispiel">Seite 2</a>
                            <ul>
                                    <li><a href="#Beispiel">Seite 2a</a>
                                    </li>
                                    <li><a href="#Beispiel">Seite 2b</a>
                                    </li>
                            </ul>
                    </li>
                    <li><a href="#Beispiel">Seite 3</a>
                    </li>
                    <li><a href="#Beispiel">Seite 4</a>
                            <ul>
                                    <li><a href="#Beispiel">Seite 4a</a>
                                    </li>
                                    <li><a href="#Beispiel">Seite 4c</a>
                                    </li>
                            </ul>
                    </li>
                    <li><a href="#Beispiel">Seite 5</a>
                    </li>
            </ul>
    </nav>
    </div>
     <small style="color:#fff;">Admin/c</small>
    </div>
    </body>
    </html>




    danke
    mfg
    dan
    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 !!!!!
    Geändert von spoo (24.04.2016 um 16:21 Uhr)

  2. #2
    Meister(in)
    Registriert seit
    24.02.2007
    Beiträge
    460
    Danke
    0
    Bekam 47 mal "Danke" in 47 Postings

    Standard AW: css menu auf andere ebene

    Probier mal
    Code:
    body {
            font: normal 1em Helvetica, Arial, sans-serif;
            background-color:#000000;
            background:url(bgrep.png) repeat-x;
    }
    nav { width: 500px;
          height: 100px;
          padding: 0px;
          border: 0px solid black;
          margin:0px auto;
    }
    
    
    h1 {
      color:orange;   /* Farbe orange */
      font-size:28pt;  /* Größe 28pt   */
      font-family:arial, "lucida console", sans-serif; /* Schriftart */
      text-align:center;
    }
    
    
    nav ul {
            margin: 0;
            padding: 0;
            text-align: center;
    }
    
    nav li {
            list-style: none;
            float: left;
            width: 80px;
            position: relative;
            margin: 0.5em;
            padding: 0;
    }
    
    nav ul ul {
             position: absolute;
             top: -99999em;
    }
    
    nav ul ul li {
            float: none;
            display: block;
    }
    
     nav a,
    nav span {
            font-size: 13px;
            display: block;
            padding: 0.3em;
            text-decoration: none;
            font-weight: bold;
            border: 1px solid green;
            border-radius: 10px 5px 10px 5px;
            color: green;
            background-color: black;
            -webkit-transition: all .25s ease-in;
            transition: all .25s ease-in;
    }
    
      nav a {
          transition: background-color .25s ease-in;
      }
    
      nav a:focus, nav a:hover, nav span {
        color: black;
        background-color: green;
        transition: background-color 0.01s;
      }
    
    
    nav ul li:hover ul {
      font: inherit;
      top:auto;
      z-index:99;
    }

  3. Folgende User finden die Antwort von djheke gut:


  4. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    24.04.2016
    Beiträge
    2
    Danke
    1
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: css menu auf andere ebene

    Hallo, danke ein wahrer Meister

  5. #4
    Meister(in)
    Registriert seit
    24.02.2007
    Beiträge
    460
    Danke
    0
    Bekam 47 mal "Danke" in 47 Postings

    Standard AW: css menu auf andere ebene

    Nun, übertreibe mal nicht.

Ähnliche Themen

  1. Image Slider / Menu Slider / Auswah Menu
    Von Turok im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 20.04.2016, 22:08
  2. Ebene in Css erstellen
    Von manfreddoof im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 02.05.2013, 02:00
  3. Photoshop Ebene bearbeiten
    Von Ochsenfrosch im Forum Forum für Grafiken und Bildbearbeitung
    Antworten: 3
    Letzter Beitrag: 29.06.2005, 19:21
  4. Jscript zur Darstellung von linearem Menu in ein Baum Menu
    Von stud3 im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 1
    Letzter Beitrag: 28.11.2004, 09:55

Stichworte

Berechtigungen

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