下拉菜单在 html 和 css 中不起作用-解网

问：

嗨，我想隐藏下拉菜单子菜单，但似乎不起作用。我使用该属性，它不会隐藏它，当我尝试并且也不会下拉时。display: block !important;display: none !important;

我想要的是当我触摸它时，它会将鼠标悬停在下拉子菜单上，然后只显示。它在哪里导致子菜单无法工作，我需要解决方案？我需要这方面的帮助。

谢谢。

这是我执行后的结果：

这是我需要显示的下拉菜单的预期输出

nav li {
  /* remove all the bullets and baked in style - probably should use div set instead */
  list-style: none;
  margin: 0px;
  padding: 0px;
}

.navbar-link {
  color: #000080;
  background-color: deepskyblue;
}

.navbar-head {
  background-color: #000099;
  font-family: Calibri, sans-serif;
}

.navbar-head2 {
  background-color: deepskyblue;
  font-family: Calibri, sans-serif;
  font-size: 18px;
}

.navbar-brand>strong {
  color: white;
  font-size: 3.3rem;
  text-transform: uppercase;
}


/* Divider line */

.menu-hr-line {
  /* border-top-width: 3px;*/
  border-top-color: #000099;
}


/* Dropdown menu */

.navbar-inverse .navbar-toggle:hover,
.navbar-inverse .navbar-toggle:focus {
  background-color: #777;
  border-color: #fff;
}

.dropdown-header {
  color: #050A30;
  font-size: 14px;
  font-weight: bold;
}

.dropdown-menu {
  width: 200px;
}

.dropdown-menu .columns-4 {
  min-width: 1300px;
  background-color: #e6ffff;
}

.dropdown .has-megamenu {
  position: static;
  display: inline-block;
}

.dropdown-menu .submenu {
  display: block !important;
  position: absolute;
  left: 50%;
  z-index: 1;
}

.dropdown-menu>li>a {
  padding: 5px 15px;
  font-weight: 300;
}

.dropdown-menu>li:hover>.submenu {
  display: block;
  z-index: 1;
}

.multi-column-dropdown {
  list-style: none;
  margin: 0px;
  padding: 0px;
}

.multi-column-dropdown>li>a {
  display: block;
  clear: both;
  line-height: 1.324624;
  color: #000c66;
  white-space: normal;
}

.multi-column-dropdown>li>a:hover {
  color: cornflowerblue;
  text-decoration: none;
  background-color: #f2f2f2;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <nav class="navbar-head">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" title="facility portal">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" runat="server" href="~/"><strong>PORTAL</strong></a>
      </div>
    </div>
  </nav>

  <div class="navbar-head2">
    <div class="container-fluid">
      <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li><a href="~/Home" class="navbar-link">HOME</a></li>
          <li class="dropdown"><span data-toggle="dropdown" class="dropdown-toggle navbar-link">GENERAL <span class="caret"></span></span>
            <ul role="menu" class="dropdown-menu">
              <li><a id="A1" href="#">Chart</a></li>
              <li><a id="A2" href="#">Document</a></li>
              <li><a id="A3" href="#">Equipment</a></li>
              <li><a id="A4" href="#">Utility</a></li>
              <li><a id="A5" href="#">Plant</a></li>
            </ul>
          </li>
          <li class="nav-item dropdown has-megamenu"><span data-toggle="dropdown" class="dropdown-toggle navbar-link">MODULES <span class="caret"></span></span>
            <ul role="menu" class="dropdown-menu multi-column columns-4">
              <li>
                <div class="row">
                    <div class="col-md-3">
                    <ul class="multi-column-dropdown">
                      <li class="dropdown-header">Report</li>
                      <li>
                        <hr class="border-top-3 solid w-100 menu-hr-line" />
                      </li>
                      <li class="dropdown"><span data-toggle="dropdown" class="data-toggle">Daily <span class="caret"></span></span>
                        <ul role="menu" class="dropdown-menu submenu">
                          <li><a id="A16" href="#">1</a></li>
                          <li><a id="A17" href="#">3</a></li>
                          <li><a id="A18" href="#">5</a></li>
                          <li><a id="A19" href="#">7</a></li>
                          <li><a id="A20" href="#">9</a></li>
                          <li><a id="A21" href="#">12</a></li>
                        </ul>
                      </li>
                      <li><a id="A7" href="#">Weekly</a></li>
                      <li><a id="A8" href="#">Abnormality</a></li>
                      <li><a id="A9" href="#">Plant</a></li>
                      <li><a id="A10" href="#">Calibration</a></li>
                      <li><a id="A11" href="#">Supervising</a></li>
                    </ul>
                  </div>
                  <div class="col-md-3">
                    <ul class="multi-column-dropdown">
                      <li class="dropdown-header">Inventory</li>
                      <li>
                        <hr class="solid w-100 menu-hr-line" />
                      </li>
                      <li><a id="A12" href="#">Items</a></li>
                    </ul>
                  </div>
                  <div class="col-md-3">
                    <ul class="multi-column-dropdown">
                      <li class="dropdown-header">Schedule</li>
                      <li>
                        <hr class="solid w-100 menu-hr-line" />
                      </li>
                      <li><a id="A13" href="#">Master</a></li>
                    </ul>
                  </div>
                  <div class="col-md-3">
                    <ul class="multi-column-dropdown">
                      <li class="dropdown-header">Documentation</li>
                      <li>
                        <hr class="solid w-100 menu-hr-line" />
                      </li>
                      <li><a id="A14" href="#">Equipment</a></li>
                      <li><a id="A15" href="#">Drawing</a></li>
                    </ul>
                  </div>
                </div>
              </li>
            </ul>
          </li>
          <li><a href="#" class="navbar-link">OFFINE MANAGEMENT SYSTEM</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

HTML CSS 推特引导-3 可视化工作室-2022

0赞 Mark Schultheiss 5/5/2023

您将其标记为 bootstrap-5，因此我将其添加到您的代码段中，但它似乎没有重现与您的图片相同的 UI

0赞 Jessica 5/8/2023

嗨，@MarkSchultheiss。我已将 bootstrap-5 更改为 bootstrap-4。我使用了 Visual Studio 2022，我使用的网站的引导程序是 Bootstrap v3.4.1 （getbootstrap.com）。从我的代码中，我需要做更多的增强，以便我可以与我发送的图像相同的 UI 匹配。但是对于UI部分，我需要你的帮助，因为我的css很差。Mark 可以帮我完成这个 css 吗？非常感谢，马克。

0赞 Mark Schultheiss 5/8/2023

我为 bootstrap 4 编辑了（你可以这样做）。大多数情况下，使用CSS的人太多了，并开始与MORE捆绑在一起，这在许多情况下不是要走的路。

0赞 Jessica 5/10/2023

非常感谢@MarkSchultheiss。我已经编译了您提供的代码。大型菜单下拉列表的输出无法与我发布的图像完全相同。执行后，输出全部合二为一。那里的 css 部分我已经尝试了所有我能做的，但它仍然是一样的。你能帮我吗？而且，GENERAL 和 MODULES 的 navbar-header2，我不知道为什么它们粘在一起，因为它应该像我发布的图像一样显示。我执行后发布的图像。非常感谢，马克。

0赞 Mark Schultheiss 5/12/2023

与“标准”导航栏相比，与所需输出相匹配的相对努力，您不太可能在这里得到一个很好的答案 - 这是一个不平凡的努力，因为它基本上有多个问题伪装成一个问题在这里 - 比如如何将“第二”级导航作为一个完整的栏，包括子菜单等。

答：

0赞 Ronnie Royston 5/5/2023 #1

正确的 HTML 元素是 .<select>

document.getElementById("button").addEventListener("click", function (e) {
  document.getElementById("select").toggleAttribute("disabled");
});
document.getElementById("button2").addEventListener("click", function (e) {
  document.getElementById("select").toggleAttribute("hidden");
});

<label for="select">Choose a pet:</label>

<select name="pets" id="select">
    <option value="">--Please choose an option--</option>
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
    <option value="hamster">Hamster</option>
    <option value="parrot">Parrot</option>
    <option value="spider">Spider</option>
    <option value="goldfish">Goldfish</option>
</select>
<br>
<br>
<button id=button>Enable/Disable Select Element</button>
<button id=button2>Show/Hide Select Element</button>

0赞 Mark Schultheiss 5/8/2023

唉，正如您可能已经知道的那样，缺乏样式并导致大量解决方法的能力。但是，恕我直言，由于这些的内置样式，也不是一个很好的选择。<select><input type="date"ul/li

1赞 Mark Schultheiss 5/9/2023 #2

这只是一个部分的解决方案 - 这里要做的太多了，无法使其成为“完整”的答案。请注意，我删除了很多内容，因为它超出了问题的范围。您还必须通过此处的“链接作为下拉触发器”来解决挑战。FWIW 我会放弃所有嵌套的 UL/LI，而只使用一组嵌套的 div 和适当的类进行引导。我目前没有更多时间来彻底审查这个问题并解决所有问题。注意：我在这里注释掉了大部分 CSS，因为它真的感觉“太多了”——尤其是当与 Bootstrap 结合使用时，它可以用类做很多事情。runat="server"

nav li {
  /* remove all the bullets and baked in style - probably should use div set instead */
  list-style: none;
  margin: 0px;
  padding: 0px;
}

.navbar-link {
  color: #000080;
  background-color: deepskyblue;
}

.navbar-head {
  background-color: #000099;
  font-family: Calibri;
}

.navbar-brand {
  color: white;
  font-size: 2rem;
}

.menu-hr-line {
  /* border-top-width: 3px;*/
  border-top-color: #000099;
}


/*
.navbar-inverse .navbar-toggle:hover,
.navbar-inverse .navbar-toggle:focus {
  background-color: #777;
  border-color: #fff;
}


.navbar-head2 {
  background-color: deepskyblue;
  font-family: Calibri;
  font-size: 18px;
}

.dropdown.has-megamenu {
  position: static;
}
*
.dropdown-header {
  color: #050A30;
  font-size: 14px;
  font-weight: bold;
}

.dropdown-menu {
  width: 200px;
}

.dropdown-menu.columns-4 {
  min-width: 1345px;
  background-color: #e6ffff;
}
.dropdown-menu .submenu {
  display: block !important;
  position: absolute;
  left: 50%;
  top: 1px;
  z-index: 1;
}

.dropdown-menu>li:hover>.submenu {
  display: block;
  z-index: 1;
}

.dropdown-menu li a {
  padding: 5px 15px;
  font-weight: 300;
}


.multi-column-dropdown {
  list-style: none;
  margin: 0px;
  padding: 0px;
}

.multi-column-dropdown li a {
  display: block;
  clear: both;
  line-height: 1.324624;
  color: #000C66;
  white-space: normal;
}

.multi-column-dropdown li a:hover {
  text-decoration: none;
  color: cornflowerblue;
  background-color: #f2f2f2;
}

@media (max-width: 767px) {
  .dropdown-menu.multi-column {
    min-width: 240px !important;
    overflow-x: hidden;
  }
}
*/

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <nav class="navbar-head">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" title="portal">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" runat="server" href="~/"><strong>PORTAL</strong></a>
      </div>
    </div>
  </nav>
  <nav class="navbar-head2">
    <div class="container-fluid">
      <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li><a href="~/Home" class="navbar-link">HOME</a></li>
          <li class="dropdown">
            <!-- <a runat="server" href="~/General" data-toggle="dropdown" class="dropdown-toggle navbar-link">GENERAL<span class="caret"></span></a> --><span data-toggle="dropdown" class="dropdown-toggle navbar-link">GENERAL<span class="caret"></span></span>
            <ul role="menu" class="dropdown-menu">
              <li><a id="A1" href="#">Chart</a></li>
              <li><a id="A2" href="#">Document</a></li>
              <li><a id="A3" href="#">Equipment</a></li>
              <li><a id="A4" href="#">Layout</a></li>
              <li><a id="A5" href="#">Plant</a></li>
            </ul>
          </li>
          <li class="nav-item dropdown has-megamenu">
            <!-- <a runat="server" href="~/Modules" data-toggle="dropdown" class="dropdown-toggle navbar-link">MODULES <span class="caret"></span></a> -->
            <span data-toggle="dropdown" class="dropdown-toggle navbar-link">MODULES <span class="caret"></span></span>
            <ul role="menu" class="dropdown-menu multi-column columns-4">
              <li>
                <div class="row">
                  <div class="col-md-3">
                    <ul class="multi-column-dropdown">
                      <li class="dropdown-header">Report</li>
                      <li>
                        <hr class="border-top-3 solid w-100 menu-hr-line" />
                      </li>
                      <li class="dropdown" data-toggle="dropdown"> <span>Daily</span>
                        <ul role="menu" class="dropdown-menu submenu">
                          <li><a id="A16" href="#">1</a></li>
                          <li><a id="A17" href="#">3</a></li>
                          <li><a id="A18" href="#">5</a></li>
                          <li><a id="A19" href="#">7</a></li>
                          <li><a id="A20" href="#">9</a></li>
                          <li><a id="A21" href="#">12</a></li>
                        </ul>
                      </li>
                      <li><a id="A7" href="#">Weekly</a></li>
                      <li><a id="A8" href="#">Abnormality</a></li>
                      <li><a id="A9" href="#">Plant</a></li>
                      <li><a id="A10" href="#">Calibration</a></li>
                      <li><a id="A11" href="#" r>Supervising</a></li>
                    </ul>
                  </div>
                  <div class="col-md-3">
                    <ul class="multi-column-dropdown">
                      <li class="dropdown-header">Inventory</li>
                      <li>
                        <hr class="solid w-100 menu-hr-line" />
                      </li>
                      <li><a id="A12" href="#">Items</a></li>
                    </ul>
                  </div>
                  <div class="col-md-3">
                    <ul class="multi-column-dropdown">
                      <li class="dropdown-header">Schedule</li>
                      <li>
                        <hr class="solid w-100 menu-hr-line" />
                      </li>
                      <li><a id="A13" href="#">Master</a></li>
                    </ul>
                  </div>
                  <div class="col-md-3">
                    <ul class="multi-column-dropdown">
                      <li class="dropdown-header">Documentation</li>
                      <li>
                        <hr class="solid w-100 menu-hr-line" />
                      </li>
                      <li><a id="A14" href="#"> Equipment</a></li>
                      <li><a id="A15" href="#">Drawing</a></li>
                    </ul>
                  </div>
                </div>
              </li>
            </ul>
          </li>
          <li><a href="#" class="navbar-link">OFFICE MANAGEMENT SYSTEM</a></li>
        </ul>
      </div>
    </div>
  </nav>
</div>

上一个：需要在 HTML 和 CSS 中重构的 UI 设计

下一个：Bootstrap 拆分按钮未正确呈现

下拉菜单在 html 和 css 中不起作用

Dropdown menu doesn't work in html and css

评论

评论