-1

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>
C-Pound Guru
  • 15,967
  • 6
  • 46
  • 67
decode
  • 37
  • 5

2 Answers2

1

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>
Praveen Kumar Purushothaman
  • 164,888
  • 24
  • 203
  • 252
0

Put in your class categories that line: 

visibility: hidden;

And make that class in your CSS code:

.categories:hover{
visibility:visible;
}

This it will make it hidden but but still takes up space. Useful links : Hover Visibility. If you want to NOT take space you can try make it position static. I hope this works.

coffeeCode
  • 22
  • 4