Ergebnis 1 bis 3 von 3

Thema: Dropdown-menu geht nicht mehr

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

    Standard Dropdown-menu geht nicht mehr

    Hey, ich habe grade was an dem Code auf der Website geändert, allerdings nicht an dem Dropdown-menu nur jetzt funktioniert es nicht mehr, kann mir jemand weiter helfen?

    HTML:
    Code:
    <!DOCTYPE html><html>
      <head>
        <!-- TITLE -->
        <title>MyFitnessPartner</title>
    
    
        <!-- META -->
        <meta charset="utf-8">
        <meta name="description" content="MyFitnessPartner, ist eine Anwendung, in der man verschiedene Tipps, Vorschläge und eigene Fitness- und Ernährungspläne bekommt. Wir erklären Fitness Übungen, erklären wie verschiedene Körperpartien funktionieren, aber auch wie man Masse zu nehmen kann, oder Masse abbauen kann, einfache Rezepte, Schwerere Rezepte und kleine Spielrein.">
        <meta name="keywords" content="Fitness, Sports, Helper, Partner, APP, Denis Jurkovsek, Nutrition, Ernährung, Sport, Fit, Application, Free, Gratis">
        <meta name="author" content="Denis Jurkovsek">
    
    
        <!-- VIEWPORT -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    
        <!-- CSS -->
        <link rel="stylesheet" href="assets/css/style.css">
    
    
        <!--- IMPORTS -->
        <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
    
    
      </head>
      <body>
    
    
      <!-- Navigationbar -->
        <div class="navbar">
          <!-- Logo -->
          <div class="navbar-icon"><h1>MyFitnessPartner</h1></div>
    
    
          <div class="flexbox">
    
    
            <!-- Startseite -->
           <div class="flexelement"><li><a href="#"><b class="activ">Startseite</b></a></li></div>
    
    
            <!-- Fitness -->
            <div class="dropdown">
              <ul id="drop-nav">
                <li><a href="#">Fitness</a>
                  <ul>
                    <li><a href="#">Übungsausführung</a></li>
                    <li><a href="#">Übungsauserklährung</a></li>
                  </ul>
                </li>
                </ul>
            </div>
    
    
           <!-- Ernährung -->
            <div class="dropdown">
              <ul id="drop-nav">
                <li><a href="#">Ernährung</a>
                  <ul>
                    <li><a href="#">Rezepte</a></li>
                    <li><a href="#">Ernährungstipps</a></li>
                  </ul>
                </li>
                </ul>
            </div>
          </div>
        </div>
    
    
        <!-- Banner -->
        <div class="banner">
          <h1>MyFitnessPartner</h1>
          <p>Dein Persönlicher Assistent. Suchen sie sich keine Ausreden mehr, fangen sie endlich an!</p>
        </div>
    
    
        <div class="information">
          <h1>Wir helfen dir zu deinem Erfolg!</h1>
          <p>Mit unserem Programm, werden wir dich zu deinem Erfolg bringen. <br> Wir haben Trainingstipps, Übungsausführungen, Übungserklährungen, inovative Rezepte, Tipps für deine Erhnährungs, die besten Supplements und noch viel mehr! <br> Also worauf wartest du, starte noch heute!</p>
    
    
          <div class="flexbox">
            <img src="assets/img/icons/arm.png" alt="">
            <img src="assets/img/icons/ernährung.png" alt="">
            <img src="assets/img/icons/supplement.png" alt="">
            <img src="assets/img/icons/glühbirne.png" alt="">
          </div>
    
    
        </div>
    
    
        <div class="footer">
          <h1>MyFitnessPartner</h1>
          <div class="flexbox">
            <div class="flexelement"><li><a href="#"><b class="activ">Startseite</b></a></li></div>
            <div class="flexelement"><li><a href="#"><p class="activ">Impressum</p></a></li></div>
            <div class="flexelement"><li><a href="#"><p class="activ">Socialmedia</p></a></li></div>
          </div>
          <p>Copyright © 2018-2018 by Denis Jurkovsek & MyFitnessPartner.</p>
        </div>
    
    
        <!-- JS -->
        <script src="assets/js/main.js"></script>
    
    
    
    
      </body>
    </html>
    CSS:
    Code:
    /* Global */*{
      padding: 0px;
      margin: 0px;
    }
    
    
    body, html{
      width: 100%;
      height: 100%;
    }
    
    
    body{
      font-family: 'Roboto', sans-serif;
    }
    
    
    .activ{
      color: #f9ed09;
    }
    
    
    /* Dropdown */
    .dropdown ul{
      list-style: none;
      padding: 0px;
      margin: 0px;
    }
    
    
    .dropdown ul li{
      display: block;
      position: relative;
      float: left;
    }
    
    
    .dropdown li ul{
      display: none;
    }
    
    
    .dropdown ul li a{
      display: block;
      background: #262626;
      padding: 5px 10px 5px 10px;
      text-decoration: none;
      white-space: nowrap;
      color: #fff;
    
    
      transition: 0.3s;
    }
    
    
    .dropdown li:hover ul{
      display: block;
      position: absolute;
    }
    
    
    .dropdown li:hover li{
      float: none;
    }
    
    
    .dropdown li:hover {
      background: #000;
      color: white;
    }
    
    
    .dropdown li:hover li a:hover{
      background: #000;
      color: white;
    }
    
    
    .dropdown #drop-nav li ul li{
      border-top: 0px;
    }
    
    
    /* Navigationbar */
    .navbar{
      width: 100%;
      margin: 0px;
      padding: 0px;
    
    
      list-style: none;
    
    
      background: #262626;
    }
    
    
    .navbar a{
      text-decoration: none;
      color: #ffffff;
    
    
      display: block;
      line-height: 5em;
    
    
      transition: 0.3s;
      -webkit-transition: 0.3s;
      -ms-transition: 0.3s;
      -o-transition: 0.3s;
      -moz-transition: 0.3s;
    }
    
    
    .navbar a:hover{
      color: #cccccc;
    }
    
    
    .navbar h1{
      display: flex;
      -webkit-display: flex;
      -o-display: flex;
      -moz-display: flex;
      -ms-display: flex;
    
    
      flex-direction: row;
      justify-content: center;
    
    
      flex-flow: row wrap;
      -webkit-flex-flow: row wrap;
      -o-flex-flow: row wrap;
      -moz-flex-flow: row wrap;
      -ms-flex-flow: row wrap;
    
    
      font-family: 'Pacifico', cursive;
      color: #ffffff;
    }
    
    
    /* Flexbox */
    .flexbox{
      display: flex;
      -webkit-display: flex;
      -o-display: flex;
      -moz-display: flex;
      -ms-display: flex;
    
    
      flex-direction: row;
      justify-content: center;
    
    
      flex-flow: row wrap;
      -webkit-flex-flow: row wrap;
      -o-flex-flow: row wrap;
      -moz-flex-flow: row wrap;
      -ms-flex-flow: row wrap;
    }
    
    
    .flexelement{
      padding: 5px;
    }
    
    
    /* Banner */
    .banner{
      width: 100%;
      height: 75%;
      display: block;
    
    
      background-image: url('../img/2.jpg');
      border-bottom: 30px solid #27a89d;
    }
    
    
    .banner img{
      width: 100%;
      height: 750px;
      display: block;
    }
    
    
    .banner{
      box-sizing: border-box;
      min-height: 70vh;
      padding: 30vw 0 5vw;
      position: relative;
      transform-style: inherit;
      width: 100vw;
    }
    
    
    .banner h1{
      font-family: 'Pacifico', cursive;
      margin-top: -500px;
      color: white;
      font-size: 100px;
    }
    
    
    .banner p{
      margin-top: -120px;
      color: white;
      font-size: 30px;
    }
    
    
    .banner{
      box-sizing: border-box;
      min-height: 70vh;
      padding: 30vw 0 5vw;
      position: relative;
      transform-style: inherit;
      width: 100%;
    }
    
    
    .banner h1{
      font-family: 'Pacifico', cursive;
      margin-top: -500px;
      color: white;
      font-size: 100px;
    }
    
    
    .banner p{
      margin-top: -120px;
      color: white;
      font-size: 30px;
    }
    
    
    .banner *{
      font-weight: normal;
      letter-spacing: 0.2em;
      text-align: center;
      margin: 0;
      padding: 1em 0;
    }
    
    
    
    
    /* Information */
    .information{
      width: 100%;
      height: 500px;
      font-family: 'Lato', sans-serif;
      font-weight: normal;
      background: #ffffff;
    }
    
    
    .information h1{
      padding-top: 100px;
      text-align: center;
    }
    
    
    .information p{
      padding: 50px;
      text-align: center;
      font-size: 20px;
    }
    
    
    .information img{
      width: 5%;
      height: 5%;
    }
    
    
    /* Footer */
    .footer{
      width: 100%;
      height: 15%;
    
    
      background: #262626;
      padding-top: 150px;
    }
    
    
    .footer li{
      list-style-type: none;
    }
    
    
    .footer a{
      text-decoration: none;
    }
    
    
    .footer h1{
      text-align: center;
      font-family: 'Pacifico', cursive;
      color: #ffffff;
    }
    
    
    .footer p{
      color: #cccccc;
      text-align: center;
    }
    
    
    @media all and (max-width: 800px) {
    }
    Mit freundlichen Grüßen
    Denis Jurkovsek

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

    Standard AW: Dropdown-menu geht nicht mehr

    So gehts wieder https://codepen.io/basti1012/pen/VQbvoW
    Das ligt daran das dein Banner über dein Menü liegt und deswegen kein hover effekt mehr geht. Habe den Banner jetzt pointer-events:none; gegeben ,was eigentlich nur eine Notlösung ist.Kuck mal ob du das etwas anders aufbauen kannst ,vieleicht mit z-index:-1; hinter den dropdown legst oder so .Aber ich denke du bist ja noch am bauen weil so sieht man ja nicht viel von den Links im Dropdown.Habe leider nicht mehr zeit sonst hätte ich mir mehr zeit genommen da was zu machen.
    Geändert von basti1012 (11.02.2018 um 07:31 Uhr)

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    15.01.2018
    Beiträge
    7
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Dropdown-menu geht nicht mehr

    Ich danke dir vielmals!

Ähnliche Themen

  1. Durch gefloatet Objekte Dropdown-Menü nicht mehr bedienbar
    Von TheNikOne im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 26.11.2014, 16:07
  2. Dropdown Menu
    Von magic.dave im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 26.08.2013, 17:51
  3. Osc geht nicht mehr
    Von Nico1995 im Forum Computer - Internet Forum
    Antworten: 2
    Letzter Beitrag: 05.07.2008, 22:50
  4. Dropdown Menu geht nur im FF nicht
    Von minder im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 05.07.2008, 16:43
  5. laufwerk geht nicht mehr auf
    Von jeannie_87 im Forum Computer - Internet Forum
    Antworten: 6
    Letzter Beitrag: 18.06.2007, 08:49

Stichworte

Berechtigungen

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