A submenu that does not exactly fit side by side

Question

I found a problem with .sub_menu code left:-; and transform:translateX(-%); , so I changed the position to relative and repositioned with the two codes above. This seemed to work, but now the two submenus that I don't have are the longer Side-By-Side. What they do is divided into a few centimeters from above :, Not sure what made this possible, Any help would be appreciated, thanks

JSFiddle appears when you hover over the gallery

 .sub_menu { display: none; position:relative; top:-60%; left:-350%; transform:translateX(-40%); width: auto; } .sub_menu > li { display:inline-block; } .sub_menu li a { background:-webkit-linear-gradient(#77047e,#FF00FF); background:-o-linear-gradient(#77047e,#FF00FF); background:-moz-linear-gradient(#77047e,#FF00FF); background:linear-gradient(#77047e,#FF00FF); } .sub_menu li a:hover { background:#FF00FF; top:1em; } 

Answer 1

From what I understand when looking quickly, sub.menu is odd. They currently have a position: absolute style, and that will make them all the same in the same place. As you can see, you are doing it here:

 .sub_menu { display:none; position:absolute; top:-37%; left:-47%; transform:translateX(-20%); width:auto; white-space:nowrap; } 

So instead, the fix will most likely use position: relative , and then align them from there. In addition, when working with a submenu, this will help to obtain an identifier on each element in order to align it correctly (especially when aligned vertically and horizontally).