Hi all i have created a css menu in bigger size monitor it looks great but in smaller some li comes down and looks ugly how to create menu which suits for all monitor size? here is my html
<script src="js/menu.js"></script>
<link href="css/stylesmenu.css" rel="stylesheet" type="text/css">
<form enctype="multipart/form-data" id="frmMenu" method="post" action="<?php echo($_SERVER['PHP_SELF']);?>" >
<div id='cssmenu'>
<ul>
<li id="f0"><a href='TimeEntry.php'><span>TimeSheet Entry</span></a>
</li>
<li id="t0"><a href='timesheetn.php'><span>Approval Page</span></a>
</li>
<li id="r4" ><a href='UserDetails.php'><span>User Details</span></a>
</li>
<li id="r7" ><a href='engineerreport.php'><span>Engineer Report</span></a>
</li>
<li id="r5" ><a href='categoryreport.php'><span>Catogory Report</span></a>
</li>
<li id="r6" ><a href='timreport.php'><span>Time Report</span></a>
</li>
<li id="r2" ><a href='frmMstCategory.php'><span>Category Master</span></a>
</li>
<li id="r3" ><a href='frmMstSubCategory.php'><span>Sub Category Master</span></a>
</li>
<li id="r9" ><a href='ChangeUserPassword.php'><span>Change Password</span></a>
</li>
<li id="r10" ><a href='ApprChangeUserPassword.php'><span>Change Password</span></a>
</li>
<li id="r0" ><a href='Logoff.php'><span>Logoff</span></a>
</li>
</ul>
</div>
</form>
</body>
</html>
and relevant css is
#cssmenu{ height:37px; display:block; padding:0; margin:20px auto; border:1px solid; border-radius:2px; }
#cssmenu > ul {list-style:inside none; padding:0; margin:0;}
#cssmenu > ul > li {list-style:inside none; padding:0; margin:0; float:left; display:block; position:relative;}
#cssmenu > ul > li > a{ outline:none; display:block; position:relative; padding:1px 10px; font:bold 1px/10% Arial, Helvetica, sans-serif; text-align:center; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.4); }
#cssmenu > ul > li:first-child > a{border-radius:2px 0 0 5px;}
#cssmenu > ul > li > a:after{ content:''; position:absolute; border-right:1px solid; top:-1px; bottom:-1px; right:-2px; z-index:99; }
#cssmenu ul li.has-sub:hover > a:after{top:0; bottom:0;}
#cssmenu > ul > li.has-sub > a:before{ content:''; position:absolute; top:18px; right:6px; border:5px solid transparent; border-top:5px solid #fff; }
#cssmenu > ul > li.has-sub:hover > a:before{top:19px;}
#cssmenu ul li.has-sub:hover > a{ background:#3f3f3f; border-color:#3f3f3f; padding-bottom:13px; padding-top:13px; top:-1px; z-index:999; }
#cssmenu ul li.has-sub:hover > ul, #cssmenu ul li.has-sub:hover > div{display:block;}
#cssmenu ul li.has-sub > a:hover{background:#3f3f3f; border-color:#3f3f3f;}
#cssmenu ul li > ul, #cssmenu ul li > div{ display:none; width:auto; position:absolute; top:38px; padding:10px 0; background:#3f3f3f; border-radius:0 0 5px 5px; z-index:999; }
#cssmenu ul li > ul{width:200px;}
#cssmenu ul li > ul li{display:block; list-style:inside none; padding:0; margin:0; position:relative;}
#cssmenu ul li > ul li a{ outline:none; display:block; position:relative; margin:0; padding:8px 20px; font:10pt Arial, Helvetica, sans-serif; color:#fff; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.5); }
#cssmenu, #cssmenu > ul > li > ul > li a:hover{ background:#c75bc5; background:-moz-linear-gradient(top, #c75bc5 0%, #a14da8 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#c75bc5), color-stop(100%,#a14da8)); background:-webkit-linear-gradient(top, #c75bc5 0%,#a14da8 100%); background:-o-linear-gradient(top, #c75bc5 0%,#a14da8 100%); background:-ms-linear-gradient(top, #c75bc5 0%,#a14da8 100%); background:linear-gradient(top, #c75bc5 0%,#a14da8 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#c75bc5', endColorstr='#a14da8',GradientType=0); }
#cssmenu{border-color:#723778;}
#cssmenu > ul > li > a{border-right:1px solid #723778; color:#fff;}
#cssmenu > ul > li > a:after{border-color:#f68bf6;}
#cssmenu > ul > li > a:hover{background:#9d489d;}