when hover mouse on menu items don't fit within navigation bar, unable fix tiny gap between border , last navigation item , gap changes when zoom in/out page, when zoom in/out on google chrome , hover on menu items hovered item gets taller rest of bar. i've been trying figure out quite time now. thank in advance.
main objectives: getting rid of gap next "contact", making hovered items fit navbar, fixing google chrome navbar zooming issue.
here's codepen: http://codepen.io/anon/pen/qbbgkr
<nav class="menu"> <ul class="clearfix"> <li><a href="#">home</a> </li> <li><a href="#">profile</a></li> <li><a href="#">stuff</a></li> <li><a href="#">stuff</a></li> <li id="long"> <a href="#">products<span class="arrow">▼</span></a> <ul class="sub-menu"> <li><a href="#">stuff1</a></li> <li><a href="#">stuff2</a></li> <li><a href="#">stuff3</a></li> </ul> </li> <li><a href="#">contact</a></li> </ul> </nav><!-- menu --> .clearfix:after { display: block; clear: both; } .clearfix { margin-left: -37px; } nav { font-size: 1em; width: 700px; background-color: #3a5199; font-family: verdana; } #current { background-color: #6082ec; } .menu li { display: inline-block; list-style: none; position: relative; width: 15.2%; text-align: center; margin-left: -0.4%; margin-right: -0.4%; } .menu li:hover { background-color: #6082ec; } .menu { text-decoration: none; color: white; display: block; padding-top: 10px; padding-bottom: 10px; } #long { width: 24%; } .menu .arrow { font-size: 12px; line-height: 0%; } .sub-menu { width: 128px; position: absolute; z-index: -1; opacity: 0; transition: opacity linear 0.15s; background-color : #6082ec; } .menu li:hover .sub-menu { z-index:1; opacity:1; } .sub-menu li:hover { background-color: #3a5199; } .sub-menu li { width: 131%; display: block; right: 39.2px; } .sub-menu { position: relative; text-align: center; }
using reset stylesheet or normalize.css go long way in fighting various margin, padding , display inconsistencies across browsers , won't have negative margin "hacks" did .clearfix.
although have calculated percentages correctly li add 100%, gap right of contact arises pixel rounding of percentage width you've applied.
15.2% of 700px = 106.4px
the browser round down 106px. change in gap when zooming related percentage widths. @ 1 zoom level value gets rounded differently.
106px * 5 = 530px + 24% of 700px (168px) = 698px
since you're using fixed on <nav> element, why not use fixed widths on li also? or change percentage values bit. 15.2% home link creates more padding between text home , left , right edges of li profile.
fixed width solution
/* default width li */ .menu li { width: 108px; } /* home */ .menu li:nth-child(1) { width: 100px; } /* products */ .menu li:nth-child(5) { width: 168px; } as far zooming in chrome , getting height change when hovering, cannot replicate issue.
Comments
Post a Comment