二级菜单Li宽度为何无法改变（急！在线等待）

xiongweiyu88 2009-10-06 03:13:34 
<!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-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

<style>

ul {

	padding: 0px;

	list-style-type: none;

	z-index:102;

	margin:0px;

	

}

 ul li{	

    position: relative;

	width:85px !important;

	width: 87px;

	height: 25px;

	font-size: 14px;

	line-height: 25px;

	text-align: center;

	float: left;

	VERTICAL-ALIGN: middle;

	margin-right:0px;

	border:1px solid #000000; 

	background-color:#fff;

	color:#fff;

	z-index:100;

	list-style-type:none;

	

}

ul ul a:hover{ display:block; color:#f00; position:relative; z-index:110; width:12em; }

ul ul a{display:block; z-index:110; width:12em;}



li ul{

  position:absolute;

  display: none;

  list-style:none;

  left:-30px;



}



ul li a{

	text-decoration:none;

	display: block;

}

li:hover ul{

    display:block;

}

li.over ul{

    display:block

}

BODY {

	MARGIN: 0px; 

	background-position-x: 50%;

	background-position-y: 50%;

	font-size: 12px;

}

</style>

<script language="javascript">

menuList = function() {

if (document.getElementById) {

navRoot = document.getElementById("object1");

for (i=0; i<navRoot.childNodes.length; i++) {

node = navRoot.childNodes[i];

  if (node.nodeName=="LI") {

    node.onmouseover=function() {

    this.className+=" over";

    }

    node.onmouseout=function() {

    this.className=this.className.replace(/ over/g, "");

    }

 }

  }

 }

}

window.onload=menuList;

</script>

</head>



<body>

<div align="center">

<TABLE width=870 border=0 align="center" cellPadding=0 cellSpacing=0  class=Outside >

  <TBODY>

  <div style=" width:870px; background-color:#FFFFFF; text-align:center">

   <ul id="menu">

       <li><a href="index.php">#111111111</a>

            <ul>

            </ul>

       </li>

       <li><A href="news.php" >1111111111</a>

               <ul style="list-style-type:none;margin:0px;">

                <li class="childclass"><a href="news.php?nid=1">111111111</a></li>

                <li class="childclass"><a href="news.php?nid=4"  >11111</a></li>

                <li class="childclass"><a href="news.php?nid=7"  >11111111</a></li>

            </ul>

       </li>

       <li><A href="product.php" >11111111111</a>

            <ul>

                <li class="childclass"><a href="product.php?pid=28">1111111111</a></li>

                <li class="childclass"><a href="product.php?pid=27">11111111</a></li>

                            </ul>   

       </li>

       <li><A href="case.php" >111111111</a>

             <ul>

                <li class="childclass"><a href="case.php?cid=8"  >11111111</a></li>

                <li class="childclass"><a href="case.php?cid=5"  >1111111111</a></li>

                <li class="childclass"><a href="case.php?cid=7"   >111111111</a></li>

                <li class="childclass"><a href="case.php?cid=9">11111111</a></li>

                                        <li class="childclass"><a href="case.php?cid=6"  >111111111</a></li>    



              </ul>

       </li> 

       <li><A href="article.php" >11111111</a>

                   <ul>



            </ul>            

       </li>    

       <li><A href="contact.php" >11111111</a>

                   <ul>

            </ul>            

       </li>

       <li><A href="about.php" >1111111111</a>

            <ul>

            <li class="childclass"><a href="about.php?aid=6"   >111111111</a></li>

            <li class="childclass"><a href="about.php?aid=7"   >11111111</a></li>

            <li class="childclass"><a href="about.php?aid=8"  >11111111</a></li>

            <li class="childclass"><a href="about.php?aid=16"  >11111111</a></li>

            <li class="childclass"><a href="about.php?aid=17"  >1111111</a></li>

            <li class="childclass"><a href="about.php?aid=18"  >111111111</a></li>

            <li class="childclass"><a href="about.php?aid=19"  >111111111</a></li>

            <li class="childclass"><a href="about.php?aid=20"  >1111111111</a></li>

            <li class="childclass"><a href="http://www.gnhongtudi.com/about.php?aid=21"  >11111111</a></li>

            </ul>            

       </li>

       <li><A href="person.php" >111111111</a>

                   <ul>

            </ul>       

       </li>

       <li><A href="guest.php" >1111111111</a>

                   <ul>

                <li class="childclass"><a href="guest.php?act=add" >11111111</a></li>

                <li class="childclass"><a href="guest.php?act=manager" >1111111111</a></li>

            </ul>            

       </li>

       <li><A href="service.php">11111111</a>

            <ul> 

            <li class="childclass"><a href="service.php?sid=1" >1111111111</a></li>

            <li class="childclass"><a href="service.php?sid=6" >111111111</a></li>

            <li class="childclass"><a href="http://www.gnhongtudi.com/down.php" >11111111</a></li>

            </ul>       

       </li>

   </ul>

  </div>

 </TBODY>

</TABLE>

</div>

</body>

</html>
...全文
227 7 打赏 收藏 转发到动态 举报
写回复
用AI写文章
7 条回复
切换为时间正序
请发表友善的回复…
发表回复
MuBeiBei 2009-10-07
  • 打赏
  • 举报
 回复
[Quote=引用 5 楼 xiongweiyu88 的回复:]
其实这JS没用，是那!important造成的，我把！important去了就行，结贴
[/Quote]

解决了就好~·我以为是JS报错造成的~·学习了~·
xiongweiyu88 2009-10-07
  • 打赏
  • 举报
 回复
其实这JS没用，是那!important造成的，我把！important去了就行，结贴
zlcqupt 2009-10-07
  • 打赏
  • 举报
 回复
帮顶
MuBeiBei 2009-10-07
  • 打赏
  • 举报
 回复 


<script language="javascript">

menuList = function() {

if (document.getElementById) {

navRoot = document.getElementById("object1");  //你这块有问题~·object1是那个元素？

for (i=0; i<navRoot.childNodes.length; i++) {

node = navRoot.childNodes[i];

  if (node.nodeName=="LI") {

    node.onmouseover=function() {

    this.className+=" over";

    }

    node.onmouseout=function() {

    this.className=this.className.replace(/ over/g, "");

    }

 }

  }

 }

}

window.onload=menuList;

</script>


你ＪＳ报错～·document.getElementById("object1");页面里根本就没有object1的ID~·
xiongweiyu88 2009-10-07
  • 打赏
  • 举报
 回复
怎么设都不起作用
sforiz 2009-10-06
  • 打赏
  • 举报
 回复
样式表中的宽度没起作用吗？
u=3083571013,2480410743&fm=26&gp=0.jpg.png
<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>daohanglan</title> <style type="text/css"> nav { width: 960px; margin: 0 auto; /*定义导航宽度，水平居中*/ } nav ul { list-style: none; /*去掉列表符号*/ } nav ul li { float: left; /*水平排列*/ position: relative; /*父级元素相对定位*/ } nav ul li ul { position: absolute; /*子元素绝对定位*/ display: none; /*默认情况下不显示*/ left: 0; /*子元素相对父元素，left:0位置显示，二级菜单和上级一级菜单项左对齐*/ } nav ul li:hover ul { display: block; /*鼠标放上去，显示下拉菜单*/ } nav a:link, a:visited { /*定义菜单项样式*/ width: 191px; display: block; padding: 10px 0; text-decoration: none; background-color: #c11136; margin-right: 1px; color: #FFF; text-align: center; } nav a:hover { background-color: #F00; } </style> </head> <body> </body> </html>
下拉二级菜单宽度占满文档显示区
用原生JS实现的一个导航下拉菜单，下拉菜单的宽度与浏览器视口的宽度一样（js+html+css） 这个导航下拉菜单需要实现的功能是：下拉菜单的宽度与浏览器视口的宽度一样宽；一级导航只有两项，当鼠标移到一级导航上的导航项时，相应的二级导航出现。在本案例中通过改变二级导航的高度来实现二级导航的显示和消失。为了便于理解我画了一个图，如下： 在这个案例主要用到的知识有：设置定时器，清除定时器，mouse...
html导航一级宽度二级宽度,如何使用CSS控制二级导航菜单宽度？_html/css_WEB-ITnose...
回复讨论(解决方案).menu li ul a{display:block;font-size:12px;text-align:left;}给这句话重设padding;padding:0 0px;哦，看错了，修改下面的width值。.menu li li{display:block;width:130px;}还有这个的width值.menu li ul{background:#e0e0e0; /*...
DIV+CSS 二级菜单实现
DIV+CSS实现二级菜单 在网页制作中我们经常会用到的这样的导航栏+二级菜单布局 实现效果如下： 设计思路就是通过 ul li 的双重嵌套来实现二级菜单，l利用display:none将二级菜单默认隐藏，li:hover鼠标悬浮时再将其显示出来。 需要注意的是： 1.需要清除掉网页的原始属性 以防止二级菜单错位*{margin:0;padding:0;} 2.在一级菜单中使用display: block; float:left 使其横向显示 3.使用绝对对位 然后使二级菜单默认隐藏position:a
用CSS实现二级菜单
之前做案例时，在二级菜单那里卡了很长时间，现整理出来，共享一下 首先无论做三级菜单还是二级菜单时，第一步的思路就是把所有的菜单都显示出来，然后再去做相关的隐藏的操作； 那么二级菜单又分是，竖着排还是横着排两种，先说第一种竖着排。 二级菜单竖着排，是把二级菜单写入一级菜单的li里面，这样，二级菜单的宽就是一级菜单li的宽，之后的二级菜单里面的li元素会自动被挤到下面去，从而显示竖直排列的效果。...
CSS

61,111

社区成员

60,732

社区内容

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章