Demsaas Demsaas - 28 days ago 8
CSS Question

Position and float problems with categories tree?

I'm creating a simple category tree for a shop and I have a problem, its look like that:

The big space

Question is how to fix its that big space that appears

root-cat:hover
, can anyone explain whats problem and what a solution.

Fiddle

Copied some html and css that I have in my tree, hope it will help.

Answer

You can add these rules, which will fix things for the first sub menu and partly for the other ones:

root-cat {
    position: relative;
}
.sub-cat {
  position: absolute;
  left: 260px;
  top: 8px;
}

Fiddle: https://jsfiddle.net/eLat18Ls/1/

Note: To have the other submenus appear not at the top of their page, but beside their main menu entries, you have to nest the sub menus into their respective main menu entries (in the HTML). Usually, this is done with unordered lists: ul and li elements. Just google for how to build a menu using ul and li