html - Stop CSS navbar from scaling with position:relative -
i'm using css navbar has drop down menus. had problem scaling on site, helpful users here helped me fix it. solution gave me change position attribute absolute. works fine text boxes , images, changing navbar code absolute breaks , makes of buttons go second line. there way stop happening , stop navbar bugging out when page resized? sorry if hard understand. navbar css, html list:
jsfiddle: http://jsfiddle.net/qn8sm/embedded/result/
ul { font-family: 'open sans', times; font-size: 14px; margin: 0; padding: 0; list-style: none; position: relative; z-index: 150; } ul li { display: block; position: relative; float: right; } li ul { display: none; } ul li { display: block; text-decoration: none; color: #ffffff; border-top: 7px solid #cc4d4d; padding: 25px 30px 30px 30px; background: #333333; margin-left: 0px; white-space: nowrap; } ul li a:hover { background: #757575; } li:hover ul { display: block; position: absolute; } li:hover li { float: none; font-size: 11px; } li:hover { background: #757575; } li:hover li a:hover { background: #757575; }
what try set min-width:(amount of pixels)px
. sets minimum width element, if unless set max-width
, can upscale.
Comments
Post a Comment