Question 137285 in Html Question posted in
Some basic documentation can be found here.

Dropdown menu doesn't work in html and css

Hi I want to hide the dropdown-menu submenu but it seems doesn’t work. I use the property display: block !important; and it doesn’t hide it and when I try display: none !important; and doesn’t dropdown as well.

What I want is when I touched it then it will hover down the dropdown submenu then only showed.
Where does it causes the submenu couldn’t work and I need the solution for this?
I need help with this.

Thank You.

Here is my expect output that need to be showed
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/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>
Tags:

2

Answers


  1. 0

    Solution-1: Using HTML & JS

    You can use HTML attribute 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>

    And later in your JS file, when you want to show that submenu, use the following code:

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

    And when you want to hide it again, use the following code:

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

    Solution-2: Using CSS

    You can use the CSS property 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>

    Hoping that you want to show the submenu when mouse hover on ‘MODULES’.

    Hope you find this useful! Anything else please let me know in comments section.

    Login or Signup to reply.
  2. 0

    The proper HTML element is <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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search