-1

I tried to create a side menu bar with a sub-menu. The sub-menu should be visible when the cursor touches the main side menu. I used display: none; and on hover I used display: block;. The display: none; is not working for the sub-menu.

I also tried visibility: hidden; but it is also not working. What is wrong in my code?

.side-menu {
  height: 89%;
  width: 15%;
  font-size: 18px;
  font-family: Arial;
  float: left;
  z-index: 2;
}

.side-menu ul {
  margin-left: 10px;
}

.side-menu ul li {
  list-style-type: none;
  font-weight: bold;
  margin-top: 10px;
  cursor: pointer;
}

.side-menu ul li:hover {
  color: green;
}

.side-menu ul li ul {
  display: none !important;
}

#side-menu ul li:hover ul {
  display: block;
}
<html>

<head>
  <title>Green Box</title>
</head>

<body>
  <section class="header">
    <div class="side-menu" id="side-menu">
      <ul>
        <li> Home</li><br>
        <li>Offers<i class="fa fa-angle-right"></i></li>
        <ul>
          <li>sub menu</li>
          <li>sub menu</li>
          <li>sub menu</li>
          <li>sub menu</li>
        </ul>
        <li>mega sale<i class="fa fa-angle-right"></i></li><br>
        <li> great indian sale<i class="fa fa-angle-right"></i></li><br>
        <li> glass</li><br>
        <li>frames</li><br>
        <li> gift</li><br>
      </ul>
    </div>
  </section>
</body>

</html>
Sebastian Simon
  • 18,263
  • 7
  • 55
  • 75
dhiva dhina
  • 1
  • Please [validate your HTML](//html5.validator.nu/). See [Proper way to make HTML nested list?](/q/5899337/4642212). Other than that, [What Do You Mean “It Doesn’t Work”?](//meta.stackexchange.com/q/147616/289905) You haven’t clearly described your problem. Are you aware that `.side-menu ul li ul` and `#side-menu ul li ul` currently don’t match anything because of your invalid HTML structure? – Sebastian Simon May 22 '21 at 04:07

1 Answers1

0

This is wrong. You have no '< ul>'element inside '< li>'. Also remove the important.

.side-menu ul li ul {
  display: none !important;
}

You have not included which part to display when hove over the menu. I have added a class name to the submenu to make it display. So final code is

.side-menu {
  height: 89%;
  width: 15%;
  font-size: 18px;
  font-family: Arial;
  float: left;
  z-index: 2;
}

.side-menu ul {
  margin-left: 10px;
}

.side-menu ul li {
  list-style-type: none;
  font-weight: bold;
  margin-top: 10px;
  cursor: pointer;
}

.side-menu ul li:hover {
  color: green;
}

.side-menu ul ul {
  display: none;
}

#side-menu ul li:hover + .subs {
  display: block;
}
<html>

<head>
  <title>Green Box</title>
</head>

<body>
  <section class="header">
    <div class="side-menu" id="side-menu">
      <ul>
        <li> Home</li><br>
        <li>Offers<i class="fa fa-angle-right"></i></li>
        <ul class="subs">
          <li>sub menu</li>
          <li>sub menu</li>
          <li>sub menu</li>
          <li>sub menu</li>
        </ul>
        <li>mega sale<i class="fa fa-angle-right"></i></li><br>
        <li> great indian sale<i class="fa fa-angle-right"></i></li><br>
        <li> glass</li><br>
        <li>frames</li><br>
        <li> gift</li><br>
      </ul>
    </div>
  </section>
</body>
dspillai
  • 171
  • 6