导航栏的下拉菜单在主页导航栏长度之后不显示

问题描述 投票：0回答：1

我的导航栏有一个奇怪的问题。我会说，我确实使用了网上的模板。 目前的问题是，在主页上，下拉菜单没有完全扩展，只能达到实际导航栏的长度（检查下图）。 我尝试更改下拉菜单的 Z 索引，但这也不起作用。我将在这里分享导航栏的 HTML，但会将 CSS 文件附加为超链接，因为它们太长了。

对于 styles.css 和 navstyles.css 的 CSS 文件： https://anonpaste.pw/v/4248bb4b-4d29-42b9-8953-7e634d4ff3d6#qfuoKsJDiwyB44bX31ML-GmA2V5Mqam4w6iDsSvcZ3k

对于index.html（主文件）：https://anonpaste.pw/v/01329dd9-5935-457e-aad2-f2b5233b8a03#nQWcD9amGmUIrPzZWPfq_fC98HwL8amCcbmgWcJJ4og

我必须使用这两个网站，因为我的网络上不允许使用pastebin。

<!doctype html>

<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  {% load static %}
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet">

  <link rel="stylesheet" href="{% static 'food/fonts/icomoon/style.css' %}">

  <link rel="stylesheet" href="{% static 'food/css/owl.carousel.min.css' %}">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="{% static 'food/css/bootstrap.min.css' %}">

  <!-- Style -->
  <link rel="stylesheet" href="{% static 'food/css/navstyle.css' %}">
  <link rel="stylesheet" href="{% static 'food/css/style.css' %}">
  <style>
.dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 999; /* Increase the value */
    background-color: #fff; /* Set a background color */
    border: 1px solid #ddd; /* Add a border for visibility */
}

    .rounded-container {
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    }
  </style>
  <title>{% block title %} {% endblock %}</title>
</head>

<body>


  <div class="site-mobile-menu site-navbar-target">
    <div class="site-mobile-menu-header">
      <div class="site-mobile-menu-close mt-3">
        <span class="icon-close2 js-menu-toggle"></span>
      </div>
    </div>
    <div class="site-mobile-menu-body"></div>
  </div>

  <header class="site-navbar js-sticky-header site-navbar-target" role="banner">

    <div class="container">
      <div class="row align-items-center position-relative">


        <div class="site-logo">
          <a href="{% url 'index' %}" class="text-black"><span class="text-primary">Royal Taj</a>
        </div>

        <div class="col-12">
          <nav class="site-navigation text-right ml-auto " role="navigation">

            <ul class="site-menu main-menu js-clone-nav ml-auto d-none d-lg-block">
              <li><a href="{% url 'index' %}" class="nav-link {% if active_link == 'index' %}active{% endif %}">Home</a>
              </li>
              <li><a href="{% url 'food:order' %}" class="nav-link {% if active_link == 'order' %}active{% endif %}">
                  <img src="https://img.icons8.com/pastel-glyph/30/shopping-cart--v2.png" class="logo"><span
                    id="cart">0</span></a></li>




                    {% if user.is_authenticated %}
                    <li><a href="{% url 'food:profile' %}"
                      class="nav-link {% if active_link == 'profile' %}active{% endif %}">Profile</a></li>
                      {% endif %}
              <li class="has-children">
                <a class="nav-link">Food Categories</a>
                <ul class="dropdown arrow-top">
                  <li><a class="dropdown-item {% if active_link == 'starters' %}active{% endif %}"
                    href="{% url 'food:starters' %}">Starters</a></li>
                  <li><a class="dropdown-item {% if active_link == 'rice' %}active{% endif %}"
                    href="{% url 'food:rice' %}">Rice</a></li>
                  <li><a class="dropdown-item {% if active_link == 'chicken' %}active{% endif %}"
                    href="{% url 'food:chicken' %}">Chicken Main</a></li>
                </ul>
              </li>
              <li><a class="nav-link {% if active_link == 'support' %}active{% endif %}"
                href="{% url 'food:support' %}">Support / FAQs</a></li>
              <li><a class="nav-link {% if active_link == 'about_us' %}active{% endif %}"
                href="{% url 'food:about_us' %}">About Us</a></li>

            </ul>
          </nav>

        </div>

        <div class="toggle-button d-inline-block d-lg-none"><a href="#"
            class="site-menu-toggle py-5 js-menu-toggle text-black"><span class="icon-menu h3"></span></a></div>

      </div>
    </div>

  </header>
</body>


  {% block content %} {% endblock %}
  <script src="{% static 'food/js/jquery-3.3.1.min.js' %}"></script>
  <script src="{% static 'food/js/jquery.sticky.js' %}"></script>
  <script src="{% static 'food/js/popper.min.js' %}"></script>
  <script src="{% static 'food/js/bootstrap.min.js' %}"></script>

  <script src="{% static 'food/js/nav.js' %}"></script>
  <script src="{% static 'food/js/main.js' %}"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  


</html>

问题实际上是这样的：

javascript html css bootstrap-4
1个回答
0
投票

我已经设法找到了我提出的问题的解决方案。 问题出在 index.html 文件中，我将标头的溢出设置为隐藏。删除它解决了问题。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.