auto resize navigation bar on window resize or mobile device

[thp192a]

i have found the code for this: http://media02.hongkiat.com/responsive-web-nav/demo/index.html menu here: http://www.hongkiat.com/blog/responsive-web-nav/and i am trying to do it with my menu:CSS:\[code\]<style type="text/css">#trans-nav {list-style-type: none; height: 40px; padding: 0; margin: 0; }#trans-nav { list-style-type: none; height: 40px; padding: 0; margin: 0; }#trans-nav li { float: left; position: relative; padding: 0; line-height: 40px; }#trans-nav li:hover { background-position: 0 -40px; }#trans-nav li a { display: block; padding: 0 15px; color: #666666; text-decoration: none; }#trans-nav li a:hover { background-color:#F36F25; color: #eeeeee; }#trans-nav li ul { opacity: 0; position: absolute; left: 0; width: 8em; background: #EEEEEE; list-style-type: none; padding: 0; margin: 0; }#trans-nav li:hover ul { opacity: 1; }#trans-nav li ul li { float: none; position: static; height: 0; line-height: 0; background: none; }#trans-nav li:hover ul li { height: 30px; line-height: 30px; }#trans-nav li ul li a { background: #EEEEEE; }#trans-nav li ul li a:hover { background: #666666; color:#EEEEEE; }#trans-nav li { -webkit-transition: all 0.2s; }#trans-nav li a { -webkit-transition: all 0.5s; }#trans-nav li ul { -webkit-transition: all 1s; }#trans-nav li ul li { -webkit-transition: height 0.5s; }</style>\[/code\]HTML:\[code\]<ul id="trans-nav"> <li><a href="http://stackoverflow.com/questions/15733743/#">Home</a></li> <li><a href="http://stackoverflow.com/questions/15733743/#">About</a></li> <li><a href="http://stackoverflow.com/questions/15733743/#">Products</a> <ul> <li><a href="http://stackoverflow.com/questions/15733743/#">Widgets</a></li> <li><a href="http://stackoverflow.com/questions/15733743/#">Thingamabobs</a></li> <li><a href="http://stackoverflow.com/questions/15733743/#">Doohickies</a></li> </ul> </li> <li><a href="http://stackoverflow.com/questions/15733743/#">Contact</a></li> </ul>\[/code\]for some reason i cannot get it working, any ideas what i can do to make my menu the same as the one on that website or alternatively, if that will be too complicated to get my menu to just change to a dropdown menu (select) on screen resize