Question

我尝试制作一个简单的自适应导航菜单，它折叠得很好并且效果很好，直到菜单在折叠时掉落。前两个导航链接位于彼此顶部，“a href”链接也不在正确的链接后面，这是一个问题。

我认为这是我在CSS中花车的一个问题，但我不确定，如果有人能指出我的方向很好。

继承我的HTML

<div class="container">
  <header>
    <nav class="nav">
        <div class="nav-head">
            <div class="nav-logo">
                <img class="responsive-img" src="http://placehold.it/350x231" alt="Country View Logo">
            </div>
            <div class="main-text">
                <h1>Title</h1>
            </div>       
            <div class="sub-text">
                <h2>"Sub Title"</h2>
            </div>
        </div>
        <div class="nav-links">
            <a href="#" class="three-lines-menu"><b class="lines">&#9776;</b> Menu</a>
            <ul class="js-menu">
                <li><a href="#">Link</a></li>
                <li><a href="testimonials.html">Link</a></li>
                <li><a href="careers.html">Link</a></li>
                <li><a href="links.html">Link</a></li>
                <li><a href="contact-us.html">Link</a></li>
            </ul>
        </div>
     </nav>
  </header>
  <section class="clear content-block">
    <h1>Title</h1>
    <h2>"Sub-Title"</h2>
  </section>                        
</div>

继承人我的css

.container{
  background-color: #fff;
  width: 100%;
  max-width: 1000px;
  text-align: center;
  margin: auto;
}

.nav {
  width: 100%;
  height: 100%;
  font-size: 20px;
  color: #556b2f;
}

.nav-head{
  padding: 10px 0;
  padding-bottom: 15px;
}

.nav-logo {
  float: left;
  width: 35%;
  text-align: left;
  max-width:90%;
  height:auto;
  display:block;
  margin:0 auto;
}

.responsive-img{
  width:100% !important;
  height:100% !important;
  display:block;
}

.nav-contact a {
    color: #556b2f;
    text-decoration: none;
}

 .nav-links {
   margin: 30px 0;
  clear: both;
  width: 100%;
  background-color: #556b2f;
  height: 50px;
}

.nav-links ul {
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
}

    .nav-links ul li {
        width: 20%;
        float: left;
        height: 50px;
    }

        .nav-links ul li a {
            display: block;
            width: 100%;
            color: #ffffff;
                padding-top: 15px;
            text-decoration: none;
        }

    .nav-links ul li:hover, .nav-links ul li:active {
       background-color: #7b9155;
    }

   .three-lines-menu {
     background-color: #556b2f;
     color: #fff;
     font-size: 24px;
     text-decoration: none;
     float: right;
     width: 100%;
     text-align: right;
    display: none;
    height: inherit;
  }

  .lines {
    color: #7b9155;
  }

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

    .three-lines-menu {
        display: block;
        padding-top: 12px;
        padding-right: 12px;
        padding-bottom: 12px;
    }

    .nav-links {
        margin: 0px;
        min-height: 45px;
        height: auto;

    }
        .nav-links ul {
            margin: 0px;
            padding-bottom: 15px;
            height: 250px;
    }
        .nav-links ul li {
            width: 100%;
            float: none;
            height: 40px;
            background-color: #556b2f;
        }

            .nav-links ul li a {
                display: block;
                width: 100%;
            }



    .js-menu {
        display: none;
    }

 .js-menu-responsive {
        display: block;
    }
}

 .clear {
   clear: both;
 }

.content-block{
  width: 900px;
  margin: auto;
  clear: both;
  padding: 0 15px;
}

并且继承我的JS Fiddle

干杯

Answer 1

您需要在此媒体查询中添加float：left

@media screen and (max-width: 767px) {
.nav-links ul li {float:left}
}

用于响应式jquery下拉菜单的CSS

1 个答案: