html - submenu not positioning exactly side-by-side -


i found issue .sub_menu code left:-; , transform:translatex(-%);,so changed position relative , re-positioned 2 codes above, seemed work 2 sub menus have no longer side-by-side. separate few centimeters top:, not sure made happen, appreciated,thanks

jsfiddle sub menu pops when hover on 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 {   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; } 

from understand @ taking quick sub.menus odd. have style position: absolute, , make them align in same exact place. can see doing here:

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

so instead fix using position: relative, , aligning them there. when working sub menu, have id on each element align correctly (especially when aligning them vertically , horizontally).


Comments

Popular posts from this blog

PHP DOM loadHTML() method unusual warning -

python - How to create jsonb index using GIN on SQLAlchemy? -

c# - TransactionScope not rolling back although no complete() is called -