Dropdown-Menü Links nicht anklickbar

Ich erstelle eine Website für mich selbst und folgte einem Tutorial von Codecourse, als ich fertig war, bemerkte ich, dass die Schaltflächen nicht klickbar waren, als wenn Sie klickten, würde das Dropdown-Menü verschwinden. Bitte helfen Sie? Danke im Voraus.Dropdown-Menü Links nicht anklickbar

Tutorial: https://www.youtube.com/watch?v=pYN8FUiKfzA Code [HTML]: `

<!DOCTYPE html> 
     <html> 
     <head> 
      <meta charset="utf-8"> 

      <link rel="shortcut icon" href="img/cLogo.png" /> 
      <link rel="spreadsheets" href="styles/css/normalize.css"> 
      <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> 
      <link rel="stylesheet" href="styles/css/global.css">  
     </head> 
     <body> 
      <header> 
      <nav class="nav-main"> 
       <div class="logo">iTzPvPLyfe</div> 
       <a href="index.html" class="nav-item">Home</a> 
       <a href="#" class="nav-item">Apply</a> 
       <a href="#" class="nav-item nav-drop">dropdown</a> 
       <div class="nav-content"> 
       <div class="nav-sub"> 
        <ul> 
        <li><a href="skywars.html">Skywars</a></li> 
        <li><a href="#">Blitz SG</a></li> 
        </ul> 
       </div> 
       </div>   
       <a href="#" class="nav-item">About</a> 
      </nav> 
      </header> 
    <!-- -------------------------------------------------------------- -->  
      <section class="content"> 
      <p> 
      Lorem Ipsum 
      </p> 
      </section> 
    <!-- -------------------------------------------------------------- -->  
      <footer> 
      </footer> 
     </body> 
     </html>

Code [SASS]:

.nav-main { 
    width: 100%; 
    background-color: $nav-background-color; 
    height: 70px; 
    color: $nav-foreground-color; 

    .logo { 
     float: left; 
     height: 40px; 
     padding: 15px 30px; 
     font-size: 1.4em; 
     line-height: 40px; 
     } 

     > ul { 
     @extend %plainlist; 
     float: left; 
     > li { 
      float: left; 
     } 
     } 

    } 

    .nav-item { 
     display: inline-block; 
     padding: 15px 20px; 
     height: 40px; 
     line-height: 40px; 
     color: $nav-foreground-color; 
     text-decoration: none; 

     &:hover { 
      background: $nav-hover-color; 
     } 
    } 

    .nav-drop { 
     &:focus { 
      background-color: $nav-hover-color; 

      ~ .nav-content { 
      max-height: 400px; 
      @include transition(max-height, 0.4s, ease-in); 
      } 
     } 
    } 

    .nav-content { 
     margin-left: 345px; 
     position: absolute; 
     top: 70px; 
     overflow: hidden; 
     background-color: $nav-background-color; 
     max-height: 0; 

     a { 
     color: $nav-foreground-color; 
     text-decoration: none; 

     &:hover { 
      text-decoration: underline; 
      } 
     } 
    } 

    .nav-sub { 
     padding: 20px; 

     ul { 
     @extend %plainlist; 

     a { 
      display: inline-block; 
     } 
     } 
    }

Quelle

2016-08-06 Krish Matta

Arbeiten für mich. Ich glaube nicht, dass du die Mixins richtig aufgenommen hast. Da Sie sie nicht in das obige Code-Snippet aufgenommen haben, bin ich zum Tutorial-Link gegangen und habe sie manuell eingefügt. Überprüfe, ob die Mixins in der Sass-Datei oben enthalten sind, wie im Tutorial gezeigt. Stellen Sie sicher, dass Ihre Dateinamen übereinstimmen und Ihre Mixins übereinstimmen.

Ihr Sass sollte in diese CSS konvertieren. Hinweis, ich habe die Farben angepasst, und Sie sollten von hier aus nehmen können:

.nav-main { 
    width: 100%; 
    background-color: grey; 
    height: 70px; 
    color: white; 
} 
.nav-main .logo { 
    float: left; 
    height: 40px; 
    padding: 15px 30px; 
    font-size: 1.4em; 
    line-height: 40px; 
} 
.nav-main > ul { 
    margin: 0; 
    padding: 0; 
    list-style-type: none; 
    float: left; 
} 
.nav-main > ul > li { 
    float: left; 
} 

.nav-item { 
    display: inline-block; 
    padding: 15px 20px; 
    height: 40px; 
    line-height: 40px; 
    color: pink; 
    text-decoration: none; 
} 
.nav-item:hover { 
    background: orange; 
} 

.nav-drop:focus { 
    background-color: orange; 
} 
.nav-drop:focus ~ .nav-content { 
    max-height: 400px; 
    transition: max-height, 0.4s, ease-in; 
} 

.nav-content { 
    margin-left: 345px; 
    position: absolute; 
    top: 70px; 
    overflow: hidden; 
    background-color: orange; 
    max-height: 0; 
} 
.nav-content a { 
    color: blue; 
    text-decoration: none; 
} 
.nav-content a:hover { 
    text-decoration: underline; 
} 

.nav-sub { 
    padding: 20px; 
} 
.nav-sub ul { 
    margin: 0; 
    padding: 0; 
    list-style-type: none; 
} 
.nav-sub ul a { 
    display: inline-block; 
}

Quelle

2016-08-06 15:45:22 LosoTheCreator

Ich habe meine Mixins wo es ist ~ .nav-Inhalt. Danke für die Hilfe aber. –

Antwort

Verwandte Themen