Question

我对编程非常陌生，我为我的网站制作了一个菜单，它有一个下拉功能，但现在当我点击下拉列表中的1个链接时，它不会做任何事情，只会消失。我已经尝试了几天，但我似乎无法修复它。有人可以帮忙吗？

    <!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css" type="text/css" charset="utf-8" />
    <title>Travellikewedo | Travelguide</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <link rel="shortcut icon" type="image/x-icon" href="indeximg/favicon.ico">
</head>
        <body>

        <!-- Navigation -->

<header>
    <div class="wrapper">
        <nav>
            <a href="index.html"><h1 class="logo">travellikewedologo</h1></a>
            <div class="fb-like" data-href="https://www.facebook.com/kellyjohantravel" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>

        <a class="burger-nav"></a>
            <h2>Main Navigation</h2>
        <ul>

        <li class="nav-item dropdown">
          <a href="#">Reizen +</a>
          <div class="dropdown-container">
            <div class="dropdown-inner">
              <ul class="dropdown-menu">
                <li class="dropdown-menu-item"><a href="#">Landen</a></li>
                <li class="dropdown-menu-item"><a href="#">Meenemen</a></li>
                <li class="dropdown-menu-item"><a href="#">Tips</a></li>
              </ul>
            </div>
          </div>
        </li>

        <li class="nav-item dropdown">
          <a href="#">Blog +</a>
          <div class="dropdown-container">
            <div class="dropdown-inner">
              <ul class="dropdown-menu">
                <li class="dropdown-menu-item"><a href="/blog/2016.html">2016</a></li>
              </ul>
            </div>
          </div>
        </li>  


            <li><a href="/overons.html">Over ons</a></li>
            <li><a href="/contact.html">Contact</a></li>
        </ul>
        </nav>
    </div>
</header>

        <!-- Content -->


    <div id="index-banner">
        <img src="indeximg/banner.jpg" alt="welkom" class="banner-image">
    </div>

 <div id="indexcontent">

    <div class="sideright">
        <h2>Advertenties</h2>
        <p>tekst met een W zodat we kunnen zien of Raleway werkt</p>
        <p>tekst</p>
        <p>tekst</p>
        <p>tekst</p>
    </div>

    <div class="main">
        <h1>Nieuw</h1>
        <p>blabla</p>
    </div>

    <div> 
        <img class="imagesidebar" src="indeximg/banner.jpg">
    </div>

    <div class="main">
        <h1>Nieuw</h1>
        <p>blabla</p>
    </div>

    <div class="sideright">
        <h2>Advertenties</h2>
        <p>tekst</p>
        <p>tekst</p>
        <p>tekst</p>
        <p>tekst</p>
    </div>

    <div class="main">
        <h1>Nieuw</h1>
        <p>blabla</p>
     </div>

    <div id="footer">
       <div id="social"> 

           <div class="socialthumb"><a href="https://www.facebook.com/kellyjohantravel/"> <img class="socialthumbimg" src="social/facebookicon.svg"></a>
            </div>

           <div class="socialthumb"><a href="https://www.instagram.com/travel_like_we_do/"><img class="socialthumbimg" src="social/instagramicon.svg"></a>
            </div>

           <div class="socialthumb"><a href="https://www.youtube.com/channel/UCLQ3Vq79f6CjnlOy1tjT9GQ"><img class="socialthumbimg" src="social/youtubeicon.svg"></a>
            </div>

       </div>
        <p>&copy TraveLlikewedo.com 2016</p>
     </div>

</div>

    </body>
  <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="menu.js"></script>
</html>

@font-face{ 
    font-family: 'raleway';
    src: url('fonts/raleway.eot');
    src: url('fonts/raleway.eot?iefix') format('eot'),
         url('fonts/raleway.woff') format('woff'),
         url('fonts/raleway.ttf') format('truetype'),
         url('fonts/raleway.svg#webfont') format('svg');
}


body {
  font-family: "raleway", sans-serif;
  font-size: 1em;
  color: #4c4c4c;
  margin: 0;
  padding: 0;
  width: 100%;
}

p{
    color: #999;
}

/* ===== Navigation ===== */

.wrapper {
  width: 100%;
  max-width: 1180px;
  padding: 0;
  margin: 0;
}

.fb_iframe_widget {
  display: block;
  float: left;
  margin: 30px 0;
}

h1.logo {
  background-image: url(indeximg/logo602.png);
  background-repeat: no-repeat;
  width: 135px;
  height: 50px;
  text-indent: -10000px;
  float: left;
  margin: 15px;
}

header nav {
  position: fixed;
  width: 100%;
  height: 80px;
  float: right;
  background: #fff;
  border-bottom: 3px solid #bcbcbc;
  z-index: 10;
  top: 0;
}

header nav h2 {
  text-indent: -10000px;
  height: 0;
  margin: 0;
}

header nav li {
  float: left;
  list-style-type: none;
  margin: 10px 20px;
}

header nav li a {
  text-decoration: none;
  color: #4c4c4c;
  font-size: 1em;
}

header nav ul {
  float: right;
  margin: 19.5px 0;
  padding: 0;
}

header nav li a:hover {
  text-decoration: underline;
}

.dropdown a:focus {
  color: #bcbcbc;
}

.dropdown a:focus ~ .dropdown-container {
  max-height: 500px;
  transition:max-height 0.5s ease-in;
  -webkit-transition:max-height 0.5s ease-in;
  -moz-transition:max-height 0.5s ease-in;
}

.dropdown-container {
  position: absolute;
  top: 83px;
  max-height: 0;
  overflow: hidden;
  background: #fff;
}

.dropdown-menu {
  margin: 0;
  padding: 10px;
}

.dropdown-menu li a {
  padding: 10px; 
  display: inline-block;
}

.dropdown-menu-item{
    padding: 0;
    margin: 0;
    width: 100%;
}

/* ===== Index banner ===== */

.banner-image {
  position: fixed;
  width: 100%;
  height: auto;
  top: 80px;
}

/* ===== Content ===== */

#indexcontent{
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    padding: 10px 0;
    top: 600px;
    z-index: 1;
    background-color: #eee;
}

.main{
    margin-top: 10px;
    margin-right: 320px;
    margin-bottom: 10px;
    margin-left: 10px;
    padding: 20px;
    background-color: #e5e3e3;
}

.sideright{
    padding: 20px;
    margin: 10px;
    background-color: #e5e3e3;
    float: right;
    width: 260px;
    clear: right;
}
.imagesidebar{
    margin: 10px;
    float: right;
    width: 300px;
    clear: right;
}

/* ===== Reizen banner ===== */

.reizenbanner-image {
  position: fixed;
  width: 100%;
  height: 220px;
  top: 80px;
}

h1.bannertext{
    position: fixed;
    font-size: 400%;
    border: solid 3px #fff;
    padding: 0 20px;
    margin: 90px 0 0 15px;
    color: #fff;
    text-shadow: 1px 1px #bcbcbc;
}

/* ===== Subpage Content ===== */

#subpage-content{
    position: relative;
    display: inline-block;
    padding: 10px 0;
    width: 100%;
    height: auto;
    top: 302px;
    background-color: #eee;
}

.subpage-main{
    margin: 1%;
    padding: 2%;
    width: 44%;
    float: left;
}

.subpage-sideright{
    margin: 1%;
    padding: 2%;
    width: 44%;
    float: right;
    clear: right;
}
.subpage-imagesidebar {
    margin: 3%;
    width: 44%;
    float: right;
    clear: right;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.7), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.personal-info {
    margin: 1%;
    padding: 2%;
    width: 64%;
    float: left;
}

.personal-image {
    margin-top: 6%;
    margin-bottom: 3%;
    margin-left: 0;
    margin-right: 3%;
    width: 27%;
    float: right;
    clear: right;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.7), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    text-align: center;
    border-bottom: 50px solid #fff;
}

/* ===== Contact =====*/

.contact-banner-image {
  position: fixed;
  width: 100%;
  height: 220px;
  top: 83px;
}

#contact-content{
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    padding: 10px 0;
    top: 303px;
    z-index: 1;
    background-color: #eee;
}

#contact {
    position: relative;
    display: block;
    height: 250px;
    width: 100%;
    text-align: center;
}

.form-control {
    font-family: "raleway";
    font-size: 1.1em;
    height: 25px;
    width: 50%;
    border: 1px solid #bcbcbc;
    padding: 0;
    margin: 0;
}
#message.form-control {
    height: 70px;
}

/* ===== Footer ===== */

#footer{
    padding-top: 30px;
    background-color: #eee;
    height: 150px;
    clear: both;
    text-align: center;
}

#social{
    position: relative;
    width: 100%;
    height: 90px;
}

.socialthumbimg{
    width: 70px;
    height: 70px;
}

.socialthumb{
    width: 70px;
    height: 70px;
    margin: 10px 5%;
    display: inline-block;
}


/* ===== mobiles and tablets =====*/

@media screen and (max-width: 768px) {

/* ===== Navigation ===== */

 .fb_iframe_widget {
    display: block;
    float: left;
    margin: 20px 0;
  }

  h1.logo{
    margin: 5px;
  }

  header nav {
    position: fixed;
    width: 100%;
    height: 60px;
  }

  .burger-nav {
    display: inline-block;
    margin: 10px 20px;
    height: 40px;
    width: 40px;
    background: url(indeximg/hamburger.png) no-repeat 85% center;
    float: right;
  }

  header nav ul {
    overflow: hidden;
    background: #fff;
    height: 0;
  }

  header nav ul.open {
    position: relative;
    height: auto;
    margin: 0;
    padding: 0;
    width: 100%;
  }

  header nav ul li {
    float: none;
    text-align: left;
    width: 100%;
    margin: 0;
  }

  header nav ul li a {
    padding: 10px;
    border-bottom: 1px solid #bcbcbc;
    display: block;
    margin: 0;
}

.dropdown-container {
    position: static;
      }

.dropdown-menu li a {
    display: block;
    text-indent: 20px;
}


/* ===== Banner ===== */

  #index-banner img {
    position: fixed;
    width: 200%;
    height: 600px;
    left: -50%;
    top: 60px;
  }

/* ===== Content ===== */

.main{
    margin: 1%;
    padding: 2%;
    width: 94%;
    background-color: #e5e3e3;
    float: left;
}

.sideright{
    margin: 1%;
    padding: 2%;
    width: 94%;
    background-color: #e5e3e3;
    float: right;
    clear: right;
}
.imagesidebar{
    margin: 1%;
    width: 98%;
    float: right;
    clear: right;
}  

/* ===== Reizen banner ===== */

.reizenbanner-image {
  position: fixed;
  width: 200%;
  height: 220px;
  left: -50%;
  top: 60px;
}

/* ===== Subpage Content ===== */

#subpage-content{
    top: 283px;
}

.subpage-main{
    width: 94%;
}

.subpage-sideright{
    width: 94%;
}

.subpage-imagesidebar {
    width: 94%;
}

.personal-info {
    width: 94%;
}

.personal-image {
    margin: 3%;
    width: 94%;
}

/* ===== Contact ===== */

.form-control {
    width: 80%;
}
#message.form-control {
    width: 80%;
}
.contact-banner-image {
    top: 63px;
}   
#contact-content{
    top: 280px;
} 

}






$(document).ready(function(){

      $(".burger-nav").on("click", function(){

        $("header nav ul").toggleClass("open"); 

      });
});


(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/nl_NL/sdk.js#xfbml=1&version=v2.6";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

Answer 1

您的错误在于，当您点击菜单项时，焦点会丢失，菜单会在激活链接之前消失。

您可以看到，如果菜单保持打开状态，则链接可以通过删除:focus来实现：

.dropdown a ~ .dropdown-container {
  max-height: 500px;
  transition:max-height 0.5s ease-in;
  -webkit-transition:max-height 0.5s ease-in;
  -moz-transition:max-height 0.5s ease-in;
}

尝试在焦点丢失时添加动画，

或者找到一个更好的解决方案然后.dropdown a:focus ~ .dropdown-container {

这是一个例子： HTML： travellikewedologo

    <a class="burger-nav"></a>
        <h2>Main Navigation</h2>
    <ul>

    <li class="nav-item dropdown">
      <a href="#">Reizen +</a>
      <div class="dropdown-container">
        <div class="dropdown-inner">
          <ul class="dropdown-menu">
            <li class="dropdown-menu-item"><a href="#">Landen</a></li>
            <li class="dropdown-menu-item"><a href="#">Meenemen</a></li>
            <li class="dropdown-menu-item"><a href="#">Tips</a></li>
          </ul>
        </div>
      </div>
    </li>

    <li class="nav-item dropdown">
      <a href="#">Blog +</a>
      <div class="dropdown-container">
        <div class="dropdown-inner">
          <ul class="dropdown-menu">
            <li class="dropdown-menu-item"><a href="/blog/2016.html">2016</a></li>
          </ul>
        </div>
      </div>
    </li>  


        <li><a href="/overons.html">Over ons</a></li>
        <li><a href="/contact.html">Contact</a></li>
    </ul>
    </nav>

注意添加了<nav class="nav">

的CSS：

.nav li ul {
    position:absolute;
    left:0;
    top:36px;
    z-index:1;
}
.nav li ul li {
    overflow:hidden;
    height:0;
    -webkit-transition:height 200ms ease-in;
    -moz-transition:height 200ms ease-in;
    -o-transition:height 200ms ease-in;
    transition:height 200ms ease-in;
}
.nav ul > li:hover ul li {
    height:36px;
}

将此与您的身份css合并

使li链接工作

1 个答案: