Search code examples
csshovermegamenu

how do I select in css so the items appears in hover state In entire page(mega menu)

example see image]; that end-result I want to reach.[1]

How to select in CSS that all list items appears only in hover state and in four columns-width 960px; (see image above). I don't know which tag to select in this case, see HTML below.

<div class="categories">
  <li>
    <a href="#">All categories</a>
    <ul class="sub-menu">
      <li><a href="#">All categories</a></li>
      <li><a href="#">All categories</a></li>
      <li><a href="#">All categories</a></li>
      <li><a href="#">All categories</a></li>
      <li><a href="#">All categories</a></li>
      <li><a href="#">All categories</a></li>
      <li><a href="#">All categories</a></li>
      <li><a href="#">All categories</a></li>
      <li><a href="#">All categories</a></li>
      <li><a href="#">All categories</a></li>
      <li><a href="#">All categories</a></li>
      <li><a href="#">All categories</a></li>
      <li><a href="#">All categories</a></li>
      <li><a href="#">All categories</a></li>
      <li><a href="#">All categories</a></li>
      <li><a href="#">All categories</a></li>
      <li><a href="#">All categories</a></li>
      <li><a href="#">All categories</a></li>
      <li><a href="#">All categories</a></li>
      <li><a href="#">All categories</a></li>
    </ul>
  </li>
</div>
Solution

  • You can simply use this:

    1. Change the id="sub-menu" to class="sub-menu", as id is not meant to be duplicated.
    2. Give the following initial CSS: .sub-menu {display: none;}.
    3. Do not nest <li> inside <div>. Change it to <ul>

    Working Fiddle

    .categories li .sub-menu {display: none;}
.categories li:hover .sub-menu {display: block;}
    <ul class="categories">
  <li>
    <a href="#">All categories</a>
    <ul class="sub-menu">
      <li><a href="#">All categories</a></li>
      <li><a href="#">All categories</a></li>
      <li><a href="#">All categories</a></li>
      <li><a href="#">All categories</a></li>
      <li><a href="#">All categories</a></li>
      <li><a href="#">All categories</a></li>
      <li><a href="#">All categories</a></li>
      <li><a href="#">All categories</a></li>
      <li><a href="#">All categories</a></li>
      <li><a href="#">All categories</a></li>
      <li><a href="#">All categories</a></li>
      <li><a href="#">All categories</a></li>
      <li><a href="#">All categories</a></li>
      <li><a href="#">All categories</a></li>
      <li><a href="#">All categories</a></li>
      <li><a href="#">All categories</a></li>
      <li><a href="#">All categories</a></li>
      <li><a href="#">All categories</a></li>
      <li><a href="#">All categories</a></li>
      <li><a href="#">All categories</a></li>
    </ul>
  </li>
</ul>