当前位置：首页 → 问答吧 → 横向下拉菜单左右对齐的问题？

横向下拉菜单左右对齐的问题？

时间：2010-05-08

来源：互联网

这个是在网络上搜到最多的横向下拉菜单代码
但是下拉菜单里的内容与标题不能同宽对齐，在不同像素的屏幕下位置都不同，应在哪改呢？

<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta http-equiv="Content-Language" content="zh-CN" /> <title>横向下拉菜单</title> <style type="text/css">  </style> <script type=text/javascript><![CDATA[//><!]]></script> </head> <body> <div id="nan"> <ul id="nav"> <li><a href="#">菜单一</a> <ul> <li><a href="#">菜单一</a></li> <li><a href="#">菜单一</a></li> <li><a href="#">菜单一</a></li> <li><a href="#">菜单一</a></li> <li><a href="#">菜单一</a></li> <li><a href="#">菜单一</a></li> </ul> </li> <li><a href="#">菜单二</a> <ul> <li><a href="#">菜单二</a></li> <li><a href="#">菜单二</a></li> <li><a href="#">菜单二</a></li> <li><a href="#">菜单二</a></li> <li><a href="#">菜单二</a></li> </ul> </li> <li><a href="#">菜单三</a> <ul> <li><a href="#">菜单三</a></li> <li><a href="#">菜单三</a></li> <li><a href="#">菜单三</a></li> <li><a href="#">菜单三</a></li> <li><a href="#">菜单三</a></li> </ul> </li> <li><a href="#">菜单四</a> <ul> <li><a href="#">菜单四</a></li> <li><a href="#">菜单四</a></li> <li><a href="#">菜单四</a></li> <li><a href="#">菜单四</a></li> <li><a href="#">菜单四</a></li> </ul> </li> <li><a href="#">菜单五</a> <ul> <li><a href="#">菜单五</a></li> <li><a href="#">菜单五</a></li> <li><a href="#">菜单五</a></li> <li><a href="#">菜单五</a></li> <li><a href="#">菜单五</a></li> </ul> </li> </ul> </div> <div class="ad"> 1、隐藏层采用绝对定位，不会因为隐藏菜单的层显现而出现位置向下挤。<br /> 2、解决滑动层鼠标移出后最后显示的层不消失的问题。<br /> 3、解决隐藏层因为分辨率不同导致的错位。<br /><br /> </div> </body> </html>
提示：您可以先修改部分代码再运行

[ 本帖最后由 lman 于 2010-5-10 08:10 编辑 ]

作者: lman 发布时间: 2010-05-08

补充一下，效果也不能兼容IE8和火狐。

作者: lman 发布时间: 2010-05-08

这是在论坛里找到横向导航代码，只是不能隐藏内容，隐藏菜单的层显现而出现位置向下挤。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Language" content="zh-cn" /> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title> 一个精彩的JS+CSS精彩导航实例</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> h4,div,ul,li,span{ padding:0px; margin:0px} /* 最外面DIV的样式 */ #slidingBlock { width:980px; over-flow:hidden; margin:auto; height:60px; border:#ccc solid 1px; background-repeat: repeat-x; background-position: top; } #nav_box{ height:33px; width:958px; text-align:center; margin-left: 11px; } #slidingBlock a{ color:#000; } #slidingBlock h4 { float:left; width:78px; height:33px; line-height:33px; text-align:center; font-size:12px; over-flow:hidden; float:left; background-repeat: repeat-x; } #slidingBlock h4.menuNo { font-weight:normal; color: #f00; } #slidingBlock h4.menuOn { background-repeat: no-repeat; background-position: 6px bottom; color:#1368c2 } #line{ width:2px; height:33px; background-repeat: no-repeat; float:left } #slidingBlock DIV.slidingList_none { display:none } #slidingBlock DIV.slidingList { width:auto; margin:0px; padding:0px; height:27px; clear:both; background-repeat: repeat-x; line-height:27px } #slidingBlock DIV.slidingList ul { margin:0px;padding:0px; list-style:none; } #slidingBlock DIV.slidingList li { float:left; height:20px; line-height:20px; font-size:12px; text-indent:20px; } </style> </head> <body> <div id="slidingBlock"> <script language="javascript"> function switchmodTag(modtag,modcontent,modk) { for(i=1; i <26; i++) { if (i==modk) { document.getElementById(modtag+i).className="menuOn";document.getElementById(modcontent+i).className="slidingList";} else { document.getElementById(modtag+i).className="menuNo";document.getElementById(modcontent+i).className="slidingList_none";} } } </script><div id="nav_box"> <h4 class="menuOn" id="mod1" onmouseover="switchmodTag('mod','slidingList','1');this.blur();"> 法规政策</h4><div id="line"></div> <h4 class="menuNo" id="mod2" onmouseover="switchmodTag('mod','slidingList','2');this.blur();"> 政策标准</h4><div id="line"></div> <h4 class="menuNo" id="mod3" onmouseover="switchmodTag('mod','slidingList','3');this.blur();"> 环保规划</h4><div id="line"></div> <h4 class="menuNo" id="mod4" onmouseover="switchmodTag('mod','slidingList','4');this.blur();"> 环境评价</h4><div id="line"></div> <h4 class="menuNo" id="mod5" onmouseover="switchmodTag('mod','slidingList','5');this.blur();"> 环保工程</h4><div id="line"></div> <h4 class="menuNo" id="mod6" onmouseover="switchmodTag('mod','slidingList','6');this.blur();"> 环境监测</h4><div id="line"></div> <h4 class="menuNo" id="mod7" onmouseover="switchmodTag('mod','slidingList','7');this.blur();"> 环保考试</h4><div id="line"></div> <h4 class="menuNo" id="mod8" onmouseover="switchmodTag('mod','slidingList','8');this.blur();"> 环境论文</h4><div id="line"></div> <h4 class="menuNo" id="mod9" onmouseover="switchmodTag('mod','slidingList','9');this.blur();"> 环境导航</h4><div id="line"></div> <h4 class="menuNo" id="mod10" onmouseover="switchmodTag('mod','slidingList','10');this.blur();"> 求职招聘</h4><div id="line"></div> <h4 class="menuNo" id="mod11" onmouseover="switchmodTag('mod','slidingList','11');this.blur();"> 供求信息</h4><div id="line"></div> <h4 class="menuNo" id="mod12" onmouseover="switchmodTag('mod','slidingList','12');this.blur();"> 环保论坛</h4></div> <div class="slidingList" id="slidingList1"> <ul> <li ><a href="#">国家法律</a></li> <li ><a href="#">地方法规</a></li> <li ><a href="#">行政法规</a></li> <li ><a href="#">部门规章</a></li> <li ><a href="#">执法解释</a></li> <li ><a href="#">文件规范</a></li> <li ><a href="#">国际公约</a></li> <li ><a href="#">功能区划</a></li> </ul> </div> <div class="slidingList_none" id="slidingList2"> <ul> <li > <a href="#">第二个的</a></li> <li > <a href="#">第二个的</a></li> <li > <a href="#">第二个</a></li> <li > <a href="#">第二个的</a></li> <li > <a href="#">第二个的</a></li> <li > <a href="#">第二个的</a></li> <li > <a href="#">第二个的</a></li> <li > <a href="#">第二个的</a></li> <li > <a href="#">第二个的</a></li> <li > <a href="#">第二个的</a></li> </ul> </div> <div class="slidingList_none" id="slidingList3"> <ul> <li> <a href="#">第三个的</a></li> <li> <a href="#">第三个的</a></li> <li> <a href="#">第三个的</a></li> <li> <a href="#">第三个的</a></li> <li> <a href="#">第三个的</a></li> <li> <a href="#">第三个的</a></li> <li> <a href="#">第三个的</a></li> <li> <a href="#">第三个的</a></li> <li> <a href="#">第三个的</a></li> <li> <a href="#">第三个的</a></li> </ul> </div> <div class="slidingList_none" id="slidingList4"> <ul> <li> <a href="#">第4个的</a></li> <li> <a href="#">第三个的</a></li> <li> <a href="#">第三个的</a></li> <li> <a href="#">第三个的</a></li> <li> <a href="#">第三个的</a></li> <li> <a href="#">第4个的</a></li> <li> <a href="#">第三个的</a></li> <li> <a href="#">第三个的</a></li> <li> <a href="#">第三个的</a></li> <li> <a href="#">第三个的</a></li> </ul> </div> <div class="slidingList_none" id="slidingList5"> <ul> <li> <a href="#">第5个的</a></li> <li> <a href="#">第三个的</a></li> <li> <a href="#">第三个的</a></li> <li> <a href="#">第三个的</a></li> <li> <a href="#">第三个的</a></li> <li> <a href="#">第5个的</a></li> <li> <a href="#">第三个的</a></li> <li> <a href="#">第三个的</a></li> <li> <a href="#">第三个的</a></li> <li> <a href="#">第三个的</a></li> </ul> </div><div class="slidingList_none" id="slidingList6"> <ul> <li> <a href="#">第5个的</a></li> <li> <a href="#">第三个的</a></li> <li> <a href="#">第三个的</a></li> <li> <a href="#">第三个的</a></li> <li> <a href="#">第三个的</a></li> <li> <a href="#">第5个</a></li> <li> <a href="#">第三个的</a></li> <li> <a href="#">第三个的</a></li> <li> <a href="#">第三个的</a></li> <li> <a href="#">第三个的</a></li> </ul> </div><div class="slidingList_none" id="slidingList7"> <ul> <li> <a href="#">第5个的</a></li> <li> <a href="#">第三个的</a></li> <li> <a href="#">第三个的</a></li> <li> <a href="#">第三个的</a></li> <li> <a href="#">第三个的</a></li> <li> <a href="#">第5个的</a></li> <li> <a href="#">第三个的</a></li> <li> <a href="#">第三个的</a></li> <li> <a href="#">第三个的</a></li> <li> <a href="#">第三个的</a></li> </ul> </div><div class="slidingList_none" id="slidingList8"> <ul> <li> <a href="#">第5个的</a></li> <li> <a href="#">第三个的</a></li> <li> <a href="#">第三个的</a></li> <li> <a href="#">第三个的</a></li> <li> <a href="#">第三个的</a></li> <li> <a href="#">第5个的</a></li> <li> <a href="#">第三个的</a></li> <li> <a href="#">第三个的</a></li> <li> <a href="#">第三个的</a></li> <li> <a href="#">第三个的</a></li> </ul> </div><div class="slidingList_none" id="slidingList9"> <ul> <li> <a href="#">第5个的</a></li> <li> <a href="#">第三个的</a></li> <li> <a href="#">第三个的</a></li> <li> <a href="#">第三个的</a></li> <li> <a href="#">第三个的</a></li> <li> <a href="#">第5个的</a></li> <li> <a href="#">第三个的</a></li> <li> <a href="#">第三个的</a></li> <li> <a href="#">第三个的</a></li> <li> <a href="#">第三个的</a></li> </ul> </div><div class="slidingList_none" id="slidingList10"> <ul> <li> <a href="#">第5个的</a></li> <li> <a href="#">第三个的</a></li> <li> <a href="#">第三个的</a></li> <li> <a href="#">第三个的</a></li> <li> <a href="#">第三个的</a></li> <li> <a href="#">第5个的</a></li> <li> <a href="#">第三个的</a></li> <li> <a href="#">第三个的</a></li> <li> <a href="#">第三个的</a></li> <li> <a href="#">第三个的</a></li> </ul> </div><div class="slidingList_none" id="slidingList11"> <ul> <li> <a href="#">第5个的</a></li> <li> <a href="#">第三个的</a></li> <li> <a href="#">第三个的</a></li> <li> <a href="#">第三个的</a></li> <li> <a href="#">第三个的</a></li> <li> <a href="#">第5个的</a></li> <li> <a href="#">第三个的</a></li> <li> <a href="#">第三个的</a></li> <li> <a href="#">第三个的</a></li> <li> <a href="#">第三个的</a></li> </ul> </div><div class="slidingList_none" id="slidingList12"> <ul> <li> <a href="#">第5个的</a></li> <li> <a href="#">第三个的</a></li> <li> <a href="#">第三个的</a></li> <li> <a href="#">第三个的</a></li> <li> <a href="#">第三个的</a></li> <li> <a href="#">第5个的</a></li> <li> <a href="#">第三个的</a></li> <li> <a href="#">第三个的</a></li> </ul> </div> </div> <br /> <br /><br /> </body> </html>
提示：您可以先修改部分代码再运行

[ 本帖最后由 lman 于 2010-5-10 08:10 编辑 ]

作者: lman 发布时间: 2010-05-08

在网络上找了好久也没找到，自已捣弄了多次也不成功，请大家帮忙改改吧，

作者: lman 发布时间: 2010-05-10