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.menu
s 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
Post a Comment