下拉菜单在HTML和CSS中不起作用

zzzyeukh  于 2023-05-08  发布在  其他
关注(0)|答案(2)|浏览(153)

嗨我想隐藏下拉菜单子菜单，但它似乎不工作。我使用属性display: block !important;，它不会隐藏它，当我尝试display: none !important;时，也不会下拉。
我想要的是，当我触摸它，然后它会悬停下来的下拉子菜单，然后只显示。它是在哪里导致子菜单无法工作，我需要这个解决方案？我需要帮助。
谢谢你。
这里是我的预期输出，需要显示Dropdown

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

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

.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/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" 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="~/" style="color:white; font-size: 32px;"><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 runat="server" href="~/Home" style="color: #000080; background-color: deepskyblue;">HOME</a></li>

          <li class="dropdown"><a runat="server" href="~/General" data-toggle="dropdown" class="dropdown-toggle" style="color: #000080; background-color: deepskyblue;">GENERAL<span class="caret"></span></a>
            <ul role="menu" class="dropdown-menu">
              <li><a id="A1" href="#" runat="server">Chart</a></li>
              <li><a id="A2" href="#" runat="server">Document</a></li>
              <li><a id="A3" href="#" runat="server">Equipment</a></li>
              <li><a id="A4" href="#" runat="server">Layout</a></li>
              <li><a id="A5" href="#" runat="server">Plant</a></li>
            </ul>
          </li>
          <li class="nav-item dropdown has-megamenu"><a runat="server" href="~/Modules" data-toggle="dropdown" class="dropdown-toggle" style="color: #000080; background-color: deepskyblue;">MODULES <span class="caret"></span></a>
            <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="solid" style="border-top: 3px solid #000099;" /> </li>
                      <li class="dropdown" data-toggle="dropdown"><a runat="server" href="#">Daily</a>
                        <ul role="menu" class="dropdown-menu submenu">
                          <li><a id="A16" href="#" runat="server">1</a></li>
                          <li><a id="A17" href="#" runat="server">3</a></li>
                          <li><a id="A18" href="#" runat="server">5</a></li>
                          <li><a id="A19" href="#" runat="server">7</a></li>
                          <li><a id="A20" href="#" runat="server">9</a></li>
                          <li><a id="A21" href="#" runat="server">12</a></li>
                        </ul>
                      </li>
                      <li><a id="A7" href="#" runat="server">Weekly</a></li>
                      <li><a id="A8" href="#" runat="server">Abnormality</a></li>
                      <li><a id="A9" href="#" runat="server">Plant</a></li>
                      <li><a id="A10" href="#" runat="server">Calibration</a></li>
                      <li><a id="A11" href="#" runat="server">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" style="border-top: 3px solid #000099;" />
                      </li>
                      <li><a id="A12" href="#" runat="server">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" style="border-top: 3px solid #000099;" />
                      </li>
                      <li><a id="A13" href="#" runat="server">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" style="border-top: 3px solid #000099;" />
                      </li>
                      <li><a id="A14" href="#" runat="server">Equipment</a></li>
                      <li><a id="A15" href="#" runat="server">Drawing</a></li>
                    </ul>
                  </div>
                </div>
              </li>
            </ul>
          </li>
          <li><a runat="server" href="#" style="color: #000080; background-color: deepskyblue;">OFFICE MANAGEMENT SYSTEM</a></li>
        </ul>
      </div>
    </div>
  </nav>
</div>
css

2条答案

按热度按时间
dgtucam1

dgtucam11#

方案一：使用HTML和JS

您可以使用HTML属性hidden。

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

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

.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;
    }
}
<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="~/" style="color:white; font-size: 32px;"><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 runat="server" href="~/Home" style="color: #000080; background-color: deepskyblue;">HOME</a></li>

                            <li class="dropdown"><a runat="server" href="~/General" data-toggle="dropdown" class="dropdown-toggle" style="color: #000080; background-color: deepskyblue;">GENERAL<span class="caret"></span></a>
                                <ul role="menu" class="dropdown-menu">
                                    <li><a id="A1" href="#" runat="server">Chart</a></li>
                                    <li><a id="A2" href="#" runat="server">Document</a></li>
                                    <li><a id="A3" href="#" runat="server">Equipment</a></li>
                                    <li><a id="A4" href="#" runat="server">Layout</a></li>
                                    <li><a id="A5" href="#" runat="server">Plant</a></li>                            
                                </ul>
                            </li>
                            
                            
                            <li class="nav-item dropdown has-megamenu"><a runat="server" href="~/Modules" data-toggle="dropdown" class="dropdown-toggle" style="color: #000080; background-color: deepskyblue;">MODULES <span class="caret"></span></a>
                                <ul role="menu" id="myId" class="dropdown-menu multi-column columns-4" hidden>
                                  <li>
                                    <div class="row">
                                        <div class="col-md-3">
                                            <ul class="multi-column-dropdown">
                                                <li class="dropdown-header">Report</li>
                                                <li><hr class="solid" style="border-top: 3px solid #000099;" /></li>
                                                <li class="dropdown" data-toggle="dropdown"><a runat="server" href="#">Daily</a>
                                                    <ul role="menu" class="dropdown-menu submenu">
                                                        <li><a id="A16" href="#" runat="server">1</a></li>
                                                        <li><a id="A17" href="#" runat="server">3</a></li>
                                                        <li><a id="A18" href="#" runat="server">5</a></li>
                                                        <li><a id="A19" href="#" runat="server">7</a></li>
                                                        <li><a id="A20" href="#" runat="server">9</a></li>
                                                        <li><a id="A21" href="#" runat="server">12</a></li>
                                                    </ul>
                                                </li>
                                                <li><a id="A7" href="#" runat="server">Weekly</a></li>
                                                <li><a id="A8" href="#" runat="server">Abnormality</a></li>
                                                <li><a id="A9" href="#" runat="server">Plant</a></li>
                                                <li><a id="A10" href="#" runat="server">Calibration</a></li>
                                                <li><a id="A11" href="#" runat="server">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" style="border-top: 3px solid #000099;"/></li>
                                                <li><a id="A12" href="#" runat="server">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" style="border-top: 3px solid #000099;"/></li>
                                                <li><a id="A13" href="#" runat="server">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" style="border-top: 3px solid #000099;"/></li>
                                                <li><a id="A14" href="#" runat="server">Equipment</a></li>
                                                <li><a id="A15" href="#" runat="server">Drawing</a></li>
                                            </ul>
                                        </div>

                                    </div>
                                  </li>
                              </ul>
                            </li>

                            <li><a runat="server" href="#" style="color: #000080; background-color: deepskyblue;">OFFICE MANAGEMENT SYSTEM</a></li>
                        </ul>
                    </div>
                </div>
            </nav>
        </div>

稍后在你的JS文件中，当你想显示那个子菜单时，使用下面的代码：

document.getElementById("myId").removeAttribute("hidden");

如果你想再次隐藏它，请使用以下代码：

document.getElementById("myId").setAttribute("hidden", "");

方案二：使用CSS

你可以使用CSS属性visibility：

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

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

.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%;
  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;
}

#myId,
#myId3 {
  visibility: hidden;
}

#myId:hover,
#myId1:hover+#myId {
  visibility: visible;
}

#myId3:hover,
#myId2:hover+#myId3 {
  visibility: visible;
}

#myId1,
#myId2 {
  width: 80vw;
}

@media (max-width: 767px) {
  .dropdown-menu.multi-column {
    min-width: 240px !important;
    overflow-x: hidden;
  }
}
<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="~/" style="color:white; font-size: 32px;"><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 runat="server" href="~/Home" style="color: #000080; background-color: deepskyblue;">HOME</a></li>

          <li class="dropdown"><a runat="server" href="~/General" data-toggle="dropdown" class="dropdown-toggle" style="color: #000080; background-color: deepskyblue;">GENERAL<span class="caret"></span></a>
            <ul role="menu" class="dropdown-menu">
              <li><a id="A1" href="#" runat="server">Chart</a></li>
              <li><a id="A2" href="#" runat="server">Document</a></li>
              <li><a id="A3" href="#" runat="server">Equipment</a></li>
              <li><a id="A4" href="#" runat="server">Layout</a></li>
              <li><a id="A5" href="#" runat="server">Plant</a></li>
            </ul>
          </li>

          <li class="nav-item dropdown has-megamenu">
            <div id="myId1"><a id="myId0" runat="server" href="~/Modules" data-toggle="dropdown" class="dropdown-toggle" style="color: #000080; background-color: deepskyblue;">MODULES <span class="caret"></span></a></div>
            <ul role="menu" id="myId" 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="solid" style="border-top: 3px solid #000099;" />
                      </li>
                      <li class="dropdown" data-toggle="dropdown"><a runat="server" href="#" id="myId2">Daily</a>
                        <ul role="menu" class="dropdown-menu submenu" id="myId3">
                          <li><a id="A16" href="#" runat="server">1</a></li>
                          <li><a id="A17" href="#" runat="server">3</a></li>
                          <li><a id="A18" href="#" runat="server">5</a></li>
                          <li><a id="A19" href="#" runat="server">7</a></li>
                          <li><a id="A20" href="#" runat="server">9</a></li>
                          <li><a id="A21" href="#" runat="server">12</a></li>
                        </ul>
                      </li>
                      <li><a id="A7" href="#" runat="server">Weekly</a></li>
                      <li><a id="A8" href="#" runat="server">Abnormality</a></li>
                      <li><a id="A9" href="#" runat="server">Plant</a></li>
                      <li><a id="A10" href="#" runat="server">Calibration</a></li>
                      <li><a id="A11" href="#" runat="server">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" style="border-top: 3px solid #000099;" />
                      </li>
                      <li><a id="A12" href="#" runat="server">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" style="border-top: 3px solid #000099;" />
                      </li>
                      <li><a id="A13" href="#" runat="server">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" style="border-top: 3px solid #000099;" />
                      </li>
                      <li><a id="A14" href="#" runat="server">Equipment</a></li>
                      <li><a id="A15" href="#" runat="server">Drawing</a></li>
                    </ul>
                  </div>

                </div>
              </li>
            </ul>
          </li>

          <li><a runat="server" href="#" style="color: #000080; background-color: deepskyblue;">OFFICE MANAGEMENT SYSTEM</a></li>
        </ul>
      </div>
    </div>
  </nav>
</div>

希望当鼠标悬停在“模块”上时，您希望显示子菜单。
希望你觉得这有用！其他的请在评论区告诉我。

赞(0）分享  回复(0）举报  2023-05-08
nhn9ugyo

nhn9ugyo2#

正确的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）分享  回复(0）举报  2023-05-08
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com