Question

我的navbar包含dropdown-menu时出现问题。我没有克服将dropdown-menu中的菜单垂直对齐的问题。

(function($) { // Begin jQuery
  $(function() { // DOM ready
    // If a link has a dropdown, add sub menu toggle.
    $('nav ul li a:not(:only-child)').click(function(e) {
      $(this).siblings('.nav-dropdown').toggle();
      // Close one dropdown when selecting another
      $('.nav-dropdown').not($(this).siblings()).hide();
      e.stopPropagation();
    });
    // Clicking away from dropdown will remove the dropdown class
    $('html').click(function() {
      $('.nav-dropdown').hide();
    });
    // Toggle open and close nav styles on click
    $('#nav-toggle').click(function() {
      $('nav ul').slideToggle();
    });
    // Hamburger to X toggle
    $('#nav-toggle').on('click', function() {
      this.classList.toggle('active');
    });
  }); // end DOM ready
})(jQuery); // end jQuery

.navigation {
  height: 70px;
  background: #2e2e2e;
  margin-bottom: 20px;
}

.nav-container {
  max-width: 1000px;
  margin: 0 auto;
}
nav {
    margin : 0 auto;
    text-align: center;
}
nav ul {
  list-style: none;
  margin: 0 auto;
  padding: 0;
    display: inline-block;

}

nav ul li {
    display: inline-block;
}

nav ul li a, nav ul li a:visited {
  display: block;
  padding: 0 20px;
  line-height: 70px;
  background: #2e2e2e;
  text-decoration: none;
}
nav ul li a:hover, nav ul li a:visited:hover {
  background: #2581dc;
  color: #fff;
}
nav ul li a:not(:only-child):after, nav ul li a:visited:not(:only-child):after {
  padding-left: 4px;
  content: ' ▾';
}
nav ul li ul li {
  min-width: 190px;
}
nav ul li ul li a {
  padding: 15px;
  line-height: 20px;
}
.nav-dropdown {
  position: absolute;
  display: none;
  z-index: 1;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}

ul.nav-list > li > a {
    text-decoration: none;
    color: white;
    font-size: 15px;
}

.nav-dropdown > li > a {
    color: white;
    text-decoration: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="navigation">
  <div class="nav-container">

    <nav>
      <div class="nav-mobile"><a id="nav-toggle" href="#!"><span></span></a></div>
      <ul class="nav-list">
        <li class="active"><a href="{% url 'home' %}">Accueil</a></li>
        <li>
          <a href="#!">Matériel</a>
          <ul class="nav-dropdown">
            <li><a href="{% url 'materiel-home' %}">Accueil</a></li>
            <li><a href="{% url 'optiques' %}">Optiques</a></li>
            <li><a href="{% url 'monture' %}">Monture</a></li>
            <li><a href="{% url 'capteurs' %}">Capteurs Photo</a></li>
            <li class="disabled"><a href="#">Accessoires</a></li>
          </ul>
        </li>
        <li>
          <a href="#!">Galerie Photos</a>
          <ul class="nav-dropdown">
            <li><a href="{% url 'Lune' %}">Lune</a></li>
            <li><a href="{% url 'Planetaire' %}">Planètes</a></li>
            <li class="divider"></li>
            <li><a href="{% url 'Amas_Globulaires' %}">Amas globulaires</a></li>
            <li><a href="{% url 'Amas_Ouverts' %}">Amas ouverts</a></li>
            <li><a href="{% url 'Nebuleuses_Diffuses' %}">Nébuleuses diffuses</a></li>
            <li><a href="{% url 'Nebuleuses_Planetaires' %}">Nébuleuses planétaires</a></li>
            <li><a href="{% url 'Galaxies' %}">Galaxies</a></li>
          </ul>
        </li>
        <li><a href="{% url 'articles-home' %}">Article(s)</a></li>
        <li><a href="{% url 'meteo-home' %}">Météo</a></li>
      </ul>
    </nav>
  </div>
</section>

我添加了JsFiddle是为了向您展示我的结果。我想将子菜单排列在同一“面板”中，而不是前一个菜单旁边的每个子菜单。

我知道这肯定是关于display或类似问题的问题。

先谢谢您

Answer 1

将display:block用于.nav-dropdown > li，它将起作用

只需在CSS中添加以下代码

.nav-dropdown > li {
    display:block;
}

(function($) { // Begin jQuery
  $(function() { // DOM ready
    // If a link has a dropdown, add sub menu toggle.
    $('nav ul li a:not(:only-child)').click(function(e) {
      $(this).siblings('.nav-dropdown').toggle();
      // Close one dropdown when selecting another
      $('.nav-dropdown').not($(this).siblings()).hide();
      e.stopPropagation();
    });
    // Clicking away from dropdown will remove the dropdown class
    $('html').click(function() {
      $('.nav-dropdown').hide();
    });
    // Toggle open and close nav styles on click
    $('#nav-toggle').click(function() {
      $('nav ul').slideToggle();
    });
    // Hamburger to X toggle
    $('#nav-toggle').on('click', function() {
      this.classList.toggle('active');
    });
  }); // end DOM ready
})(jQuery); // end jQuery

.navigation {
  height: 70px;
  background: #2e2e2e;
  margin-bottom: 20px;
}

.nav-container {
  max-width: 1000px;
  margin: 0 auto;
}
nav {
    margin : 0 auto;
    text-align: center;
}
nav ul {
  list-style: none;
  margin: 0 auto;
  padding: 0;
    display: inline-block;

}

nav ul li {
    display: inline-block;
}

nav ul li a, nav ul li a:visited {
  display: block;
  padding: 0 20px;
  line-height: 70px;
  background: #2e2e2e;
  text-decoration: none;
}
nav ul li a:hover, nav ul li a:visited:hover {
  background: #2581dc;
  color: #fff;
}
nav ul li a:not(:only-child):after, nav ul li a:visited:not(:only-child):after {
  padding-left: 4px;
  content: ' ▾';
}
nav ul li ul li {
  min-width: 190px;
}
nav ul li ul li a {
  padding: 15px;
  line-height: 20px;
}
.nav-dropdown {
  position: absolute;
  display: none;
  z-index: 1;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}

ul.nav-list > li > a {
    text-decoration: none;
    color: white;
    font-size: 15px;
}

.nav-dropdown > li > a {
    color: white;
    text-decoration: none;
}

.nav-dropdown > li {
    display:block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="navigation">
  <div class="nav-container">

    <nav>
      <div class="nav-mobile"><a id="nav-toggle" href="#!"><span></span></a></div>
      <ul class="nav-list">
        <li class="active"><a href="{% url 'home' %}">Accueil</a></li>
        <li>
          <a href="#!">Matériel</a>
          <ul class="nav-dropdown">
            <li><a href="{% url 'materiel-home' %}">Accueil</a></li>
            <li><a href="{% url 'optiques' %}">Optiques</a></li>
            <li><a href="{% url 'monture' %}">Monture</a></li>
            <li><a href="{% url 'capteurs' %}">Capteurs Photo</a></li>
            <li class="disabled"><a href="#">Accessoires</a></li>
          </ul>
        </li>
        <li>
          <a href="#!">Galerie Photos</a>
          <ul class="nav-dropdown">
            <li><a href="{% url 'Lune' %}">Lune</a></li>
            <li><a href="{% url 'Planetaire' %}">Planètes</a></li>
            <li class="divider"></li>
            <li><a href="{% url 'Amas_Globulaires' %}">Amas globulaires</a></li>
            <li><a href="{% url 'Amas_Ouverts' %}">Amas ouverts</a></li>
            <li><a href="{% url 'Nebuleuses_Diffuses' %}">Nébuleuses diffuses</a></li>
            <li><a href="{% url 'Nebuleuses_Planetaires' %}">Nébuleuses planétaires</a></li>
            <li><a href="{% url 'Galaxies' %}">Galaxies</a></li>
          </ul>
        </li>
        <li><a href="{% url 'articles-home' %}">Article(s)</a></li>
        <li><a href="{% url 'meteo-home' %}">Météo</a></li>
      </ul>
    </nav>
  </div>
</section>

导航栏中垂直居中的下拉菜单

1 个答案: