Dropdown-menu geht nicht mehr

Denis Jurkovsek

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:

HTML

<!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>

Alles anzeigen

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) {
}

Alles anzeigen

Mit freundlichen Grüßen
Denis Jurkovsek

basti1012

So gehts wieder

*** Link entfernt, weil nicht mehr erreichbar ***
Das liegt daran das dein Banner über dein Menü liegt und deswegen kein hover Effekt mehr geht. Habe dem Banner jetzt pointer-events:none; gegeben ,was eigentlich nur eine Notlösung ist.Guck mal, ob du das etwas anders aufbauen kannst ,vielleicht 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.

Denis Jurkovsek

Ich danke dir vielmals!

Dropdown-menu geht nicht mehr

Tags

Benutzer online in diesem Thema