CODEWITHSUNDEEP
css
Joe
Joe

Reputation: 1055

Pure CSS Responsive Menu overflow-x issue and more

In this codepen I have 2 issues:

Hovering Category87 (sub Category81) the sub-submenu is not visible since it scroll right: I'm sure I have to add

overflow-x: -100%

but I've not found where to add it

Moreover there are issues on

Category4

(and all the subcategories in the first column) that do not have the same behaviour as Category27 and other, but on this point I have no idea of the bug.

Can pls suggest solution

Upvotes: 0

Views: 56

Answers (1)

llobet
llobet

Reputation: 2790

  1. Your HTML code is invalid and may give you some errors. Note that categories that have subcategories like 4,7,13,19,27... aren't closed properly. By the way, I suggest you to indent the code and you will see it clearer.

    <li>
   <a href='/?cat_13'>Category 13</a>
   <ul>
     <li><a href='/?cat_14'>Category 14</a></li>
   </ul>
</li>

  2. At line 343 you should remove :not( :first-child ) in order to solve first column issues.

    .nav li:not( :first-child ):hover ul li ul li {
  left: 100%;
  top:-1.5em;
}

  3. You should decide what to do with the last column. I don't know exactly what you mean by overflow-x:-100%. You might want the last column subcategories to go to the left to avoid window scrollbars. One option could be this:

    .nav li:last-child:hover ul li ul li {
  left: -100%;
  top:-1.5em;
}

I hope it helps.

Upvotes: 1

Related Questions