jquery - CSS Navigation Menu moves when hovered -
i have jquery/css navigation menu i'm creating right now. i've had problem before, forgot how fixed it. every time hover on link in navigation whole thing moves few pixels left. know how can fix this?
here demo seems working fine when it's not in editor.
https://jsfiddle.net/8555tz0d/
<div id="nav"> <div id="nav_links"> <ul class="dropdown"> <li> <a href="…">4-color offset printing</a> <ul> <li> <a href="…">monthly special</a> </li> <li> <a href="…">bookmarks</a> </li> <li> <a href="...">brochures / flyers</a> </li> <li> <a href="...">brochures w/ direct mailing</a> </li> <li> <a href="...">brochures w/ free folding</a> </li> <li> <a href="...">business cards</a> </li> <li> <a href="...">business cards w/round corners</a> </li> <li> <a href="...">business cards - mini</a> </li> <li> <a href="...">business cards w/free shipping</a> </li> <li> <a href="...">fold-over business cards</a> </li> <li> <a href="...">calendars</a> </li> <li> <a href="...">catalogs</a> </li> <li> <a href="...">cd inlays w/ perf</a> </li> <li> <a href="...">cd inserts</a> </li> <li> <a href="...">club flyers</a> </li> <li> <a href="...">custom order</a> </li> <li> <a href="...">door hangers</a> </li> <li> <a href="...">dvd inserts</a> </li> <li> <a href="...">dvd/cd mailers</a> </li> <li> <a href="...">envelopes</a> </li> <li> <a href="...">small flyers</a> </li> <li> <a href="...">presentation folders</a> </li> <li> <a href="...">greeting cards</a> </li> <li> <a href="...">hang tags</a> </li> <li> <a href="...">labels - cut sheets</a> </li> <li> <a href="...">letterhead</a> </li> <li> <a href="...">notepads</a> </li> <li> <a href="...">postcards</a> </li> <li> <a href="...">postcards w/ direct mailing</a> </li> <li> <a href="...">posters</a> </li> <li> <a href="...">rack cards</a> </li> <li> <a href="...">tear cards</a> </li> <li> <a href="...">trading cards</a> </li> </ul> </li> <li> <a href="…">large format</a> <ul> <li> <a href="…">banner stands</a> </li> <li> <a href="…">digital posters</a> </li> <li> <a href="...">presentation boards</a> </li> <li> <a href="...">retractable banner no display</a> </li> <li> <a href="...">signage</a> </li> <li> <a href="...">spider feet stand only</a> </li> <li> <a href="...">step , repeat</a> </li> <li> <a href="...">trade show graphics</a> </li> <li> <a href="...">vehicle decals</a> </li> <li> <a href="...">vinyl banners</a> </li> <li> <a href="...">vinyl labels</a> </li> <li> <a href="...">white canvas</a> </li> <li> <a href="...">window cling</a> </li> <li> <a href="...">window perf</a> </li> <li> <a href="...">x-frame banner no stand</a> </li> <li> <a href="...">x-frame banner</a> </li> <li> <a href="...">yard signs</a> </li> <li> <a href="...">yard signs stakes</a> </li> </ul> <li> <a href="…">1 & 2 color printing</a> <ul> <li> <a href="…">brochures / flyers</a> </li> <li> <a href="…">business cards</a> </li> <li> <a href="…">envelopes</a> </li> <li> <a href="…">letterhead</a> </li> <li> <a href="…">ncr forms</a> </li> <li> <a href="…">notepads</a> </li> <li> <a href="…">postcards</a> </li> <li> <a href="…">small flyers</a> </li> </ul> </li> <li> <a href="…">4-color digital printing</a> <ul> <li> <a href="…">bookmarks</a> </li> <li> <a href="…">brochures / flyers</a> </li> <li> <a href="…">bumper stickers</a> </li> <li> <a href="…">business cards</a> </li> <li> <a href="…">calendars</a> </li> <li> <a href="…">catalogs</a> </li> <li> <a href="…">cd inlays w/ perf</a> </li> <li> <a href="…">cd inserts</a> </li> <li> <a href="…">club flyers</a> </li> <li> <a href="…">dvd inserts</a> </li> <li> <a href="…">envelopes</a> </li> <li> <a href="…">greeting cards</a> </li> <li> <a href="…">hang tags</a> </li> <li> <a href="…">labels - cut sheet</a> </li> <li> <a href="…">letterhead</a> </li> <li> <a href="…">magnets</a> </li> <li> <a href="…">plastic</a> </li> <li> <a href="…">postcards</a> </li> <li> <a href="…">posters</a> </li> <li> <a href="…">rack cards</a> </li> <li> <a href="…">small flyers</a> </li> <li> <a href="…">tear cards</a> </li> <li> <a href="…">trading cards</a> </li> <li> <a href="…">t-shirts</a> </li> </ul> </li> <li> <a href="…">roll labels</a> <ul> <li> <a href="…">roll labels</a> </li> </ul> </li> <li> <a href="…">services</a> <ul> <li> <a href="…">about us</a> </li> <li> <a href="…">contact us</a> </li> <li> <a href="…">coupons</a> </li> <li> <a href="…">file upload</a> </li> <li> <a href="…">artwork preparation</a> </li> <li> <a href="…">go green</a> </li> <li> <a href="…">every door direct mail</a> </li> <li> <a href="…">lost password help</a> </li> <li> <a href="…">privacy & security</a> </li> <li> <a href="…">terms & conditions</a> </li> </ul> </li> </li> </ul> </div> </div> #nav { background-color:#343232; width:100%; height:44px; } #nav_links { background-color:#343232; height:44px; width:960px; margin:0px auto; } #nav li { color:#fff; } #nav li ul { color:#000; } #nav li:nth-child(1):hover { background:#0f0; text-decoration:none; padding:0px; } #nav li:nth-child(2):hover { background:#0f0; text-decoration:none; padding:0px; } .dropdown, .dropdown ul, .dropdown li{ height:44px; margin : 0; padding : 0px 0px 0px 0px; color:#fff; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .dropdown ul{ display : none; position : absolute; top : 100%; left : 0; z-index : 1; } [dir=rtl] .dropdown ul{ left : auto; right : 0; } .dropdown ul ul, [dir=rtl] .dropdown ul .dropdownlefttoright ul{ top : 0; left : 100%; right : auto; } [dir=rtl] .dropdown ul ul, .dropdown ul .dropdownrighttoleft ul{ left : auto; right : 100%; } .dropdown li{ margin-left:20px; position : relative; display : block; list-style-type : none; } .dropdown > li{ display : inline-block; } .dropdown a, .dropdown span{ display : block; text-decoration : none; white-space : pre; } .dropdown li:hover > ul{ display : block; } .dropdownvertical{ display : inline-block; } .dropdownvertical > li{ display : block; } .dropdownvertical ul{ top : 0; left : 100%; } [dir=rtl] .dropdownvertical ul{ left : auto; right : 100%; } .dropdownjavascript li:hover > ul{ display : none; } .dropdownjavascript li.dropdownopen > ul{ display : block; }
remove auto nav-links margin.
updated fiddle https://jsfiddle.net/8555tz0d/2/
#nav_links { background-color:#343232; height:44px; width:960px; margin:0px; }
Comments
Post a Comment