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

Popular posts from this blog

c# - Send Image in Json : 400 Bad request -

jquery - Fancybox - apply a function to several elements -

An easy way to program an Android keyboard layout app -