How to let ul re-size by window width change when its with nowrap property

Question

As my title write, now I have a menu made by ul li, I won't let the menu break due to window is too narrow. But once it is attached "nowrap" property, it won't re-size with windows anymore, how can I make it is not only nowrap but no-break line.

<ul class="parallMenu">
<li>item1</li>
<li>item2</li>
</ul>



.parallMenu{
   list-style:none;
   margin-left:0;
   padding-left:0;
   text-decoration:none;
   white-space:npwrap;
   width:100%;
}

.parallMenu li{
   width:120px;
   min-width:30px;
   display:inline-block;

}

Thanks!

Answer 1

So,

$(".parallMenu").toggleClass("nowrap");

.nowrap
{
  width: 500px !important; /*(fixed value)*/;
}

same goes for the other properties

OR

<ul id="MyMenu" class="parallMenu wrap"></ul>
$("#MyMenu").toggleClass("wrap");
$("#MyMenu").toggleClass("nowrap");

.wrap
{
  white-space :wrap;
}
.nowrap
{
 white-space: nowrap;
}

and have different class defining differet stuff for u.

EDITED:

Please use CSS media screen if there is no script.

@media (min-width: 768px) { 
   .parallMenu
   {
      white-space:nowrap;
   }
}