1

So far I've tried to use this code:

CSS Code:

/*global*/
html,
body {
  width: 100;
  margin: 10;
  padding: 10;
  font-family: Avenir, sans-serif;
}

/*functions*/

.multi-level,
.item ul,
.nav input[type="checkbox"] {
  display: none;
}
#menu:checked ~ .multi-level,
.item input:checked ~ ul {
  display: block;
}

HTML :

<body>
  <p style="font-family: 'Avenir'; text-align: center">
    "What is this website about?" Info about select Macs and frequently asked
    questions.
  </p>

  <div class="nav">
    <input type="checkbox" id="menu" />
    <label for="menu">&#9776</label>
  </div>

  <div class="multi-level">
    <div class="item">
      <input type="checkbox" id="A" />
      <label for="A">Mac Mini</label>

      <ul>
        <li><a href="#">2005-2006 (PPC)</a></li>
        <li><a href="#">2006-2010 (Polycarbonate Mini*)</a></li>
        <li><a href="#">2010-2018 (Aluminium Mini*)</a></li>
        <li><a href="#">2020-Present (M1 Mini)</a></li>
      </ul>
    </div>
  </div>
</body>

The dropdown menu isn't working for some reason, I've tried adding visibility: visible; and visibility: show; doesn't seem to do anything.

I've tried to use Firefox and Safari, doesn't work on either of them could it be a browser related issue?

Note: I'm on the latest versions of both of them.

Mario Petrovic
  • 7,500
  • 14
  • 42
  • 62
Basewrecker
  • 11
  • 1

1 Answers1

0

Your problem is that this selector doesn't select anything:

#menu:checked ~ .multi-level {
    display: block;
}

Your div.multi-level isn't a sibling of #menu, it's a sibling of .nav. But there's no CSS parent selector, so the only way to really fix this problem with a pure CSS solution is to restructure your HTML. You could get rid of div.nav, or you could move div.multi-level inside of div.nav right after label for="menu" or whatever else works for you.

Alternatively, you can use a JavaScript solution to toggle a class on one or more elements.

cjl750
  • 4,380
  • 3
  • 15
  • 27