html - Text will not zoom outissues -


i'd decrease size of text when viewer zooms out menu design, it's not working. tried few suggestions offered here haven't had luck.

can offer suggestions? tia

here's fiddle: demo

<div style="font-size:20px"> text resizes when zoon + or - </div> <div id="nav" style="display: inline-block, width: 100%;"> <ul id="nav"> <li><a href="#">top level menu</a> <ul> <li class="first"><a href="#">sub level 1</a> <ul> <li class="first"><a href="#">sub level 2</a></li> <li><a href="#">sub level 2</a></li> <li class="last"><a href="#">sub level 2</a></li> </ul> </li> <li class="last"><a href="#">sub level 1</a></li> </ul> </li> </ul> </div>  /* main menu */  #nav {   margin-top: 0px;   margin-right: auto;   margin-left: auto;   background-color: #222;   text-align: center;   font-family: verdana, helvetica, sans-serif; }  #nav li {   margin-top: 10px;   line-height: 2px; }  #nav li.last {   border: none; }  #nav {   text-align: left; }  #nav ul {   display: inline-block;   margin-top: 0px;   padding: 0 5px;   border-radius: 5px;   list-style: none; }  #nav ul:after {   display: block;   visibility: hidden;   clear: both;   height: 0px;   content: '.'; }  #nav ul li {   position: relative;   float: left;   padding-bottom: 0px;   border-right: 1px solid #444;   line-height: 1px; }  #nav ul li {   display: block;   padding: 15px 17px 14px;   color: #aaa;   text-decoration: none;   text-transform: uppercase;   letter-spacing: 1.1px;   font-size: 12px; }  #nav ul li:hover > {   color: #fff; }  #nav ul li.active > {   color: #2980b9; }   /* sub menu */  #nav ul li > ul:before {   position: absolute;   top: -9px;   left: 120px;   margin-bottom: -1px;   padding-top: 10px;   width: 0;   height: 0;   border-width: 0 9px 9px 9px;   border-style: solid;   border-color: transparent transparent #777 transparent;   content: ""; }  #nav ul li > ul {   position: absolute;   top: 10px;   left: 50%;   z-index: -9999;   visibility: hidden;   margin-left: -130px;   padding-top: 10px;   width: 240px;   background: none;   opacity: 0; }  #nav ul li:hover > ul {   top: 95%;   z-index: 100;   display: block;   visibility: visible;   opacity: 1; }  #nav ul li > ul li:first-child {   padding-top: 3px;   border-radius: 4px 4px 0 0; }  #nav ul li > ul li:last-child {   border-radius: 0 0 4px 4px; }  #nav ul li > ul li {   margin-top: 0px;   margin-bottom: -5px;   padding: 0 3px 3px;   width: 100%;   border: none;   background: #777;   -webkit-box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.4); 


Comments

Popular posts from this blog

serialization - Convert Any type in scala to Array[Byte] and back -

matplotlib support failed in PyCharm on OSX -

python - Matplotlib: TypeError: 'AxesSubplot' object is not callable -