css菜单对齐更改 [英] css menu alignment change
本文介绍了css菜单对齐更改的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
大家好我已经在更大尺寸的显示器上创建了一个css菜单看起来很棒但是在较小的一些li下来看起来很难看如何创建适合所有显示器尺寸的菜单？这是我的html
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>
和相关的CSS是
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;} 推荐答案
_SERVER['PHP_SELF']);?>\" >
<div id='cssmenu'>
<ul>
<li id=\"f0\"><a href='TimeEntry.php'><span>TimeSheet Entry</span></a>
\t
</li>
<li id=\"t0\"><a href='timesheet n.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>
_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
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;} 这篇关于css菜单对齐更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
