css+js 横向2级菜单 有两个问题

ccnp_Server 2008-01-11 10:19:13
按照如下代码，有两个效果无法实现，不知道用什么方法可以基于下述代码实现效果？
1. 在菜单条目中加入管道符"|" ，如： 菜单一 | 菜单二 | 菜单三
2. 默认显示"菜单一"的子菜单，也就是当打开时不需要hover，即可默认显示出“菜单一”的子菜单


<!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" lang="zh-CN">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>css菜单演示</title>

<style type="text/css">

<!--

*{margin:0;padding:0;border:0;}

body {

	font-family: arial, 宋体, serif;

        font-size:12px;

}

#nav {

	 line-height: 24px;  list-style-type: none; background:#666;

}

#nav a {

	display: block; width: 80px; text-align:center;

}

#nav a:link  {

	color:#666; text-decoration:none;

}

#nav a:visited  {

	color:#666;text-decoration:none;

}

#nav a:hover  {

	color:#FFF;text-decoration:none;font-weight:bold;

}

#nav li {

	float: left; width: 80px; background:#CCC;

}

#nav li a:hover{

	background:#999;

}

#nav li ul {

	line-height: 27px;  list-style-type: none;text-align:left;

	left: -999em; width: 980px; position: absolute; float:left;

}

#nav li ul li{

	float: left; width: 80px;

	background: #F6F6F6; 

}

#nav li ul a{

	display: block; width: 80px;text-align:center;

}

#nav li ul a:link  {

	color:#666; text-decoration:none;

}

#nav li ul a:visited  {

	color:#666;text-decoration:none;

}

#nav li ul a:hover  {

	color:#F3F3F3;text-decoration:none;font-weight:normal;

	background:#C00;

}

#nav li:hover ul {

	left: 0;

}

#nav li.sfhover ul {

	left: 0;

}

#content {

	clear: left; 

}

-->

</style>

<script type=text/javascript><!--//--><![CDATA[//><!--

function menuFix() {

	var sfEls = document.getElementById("nav").getElementsByTagName("li");

	for (var i=0; i<sfEls.length; i++) {

		sfEls[i].onmouseover=function() {

		this.className+=(this.className.length>0? " ": "") + "sfhover";

		}

		sfEls[i].onMouseDown=function() {

		this.className+=(this.className.length>0? " ": "") + "sfhover";

		}

		sfEls[i].onMouseUp=function() {

		this.className+=(this.className.length>0? " ": "") + "sfhover";

		}

		sfEls[i].onmouseout=function() {

		this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), 

"");

		}

	}

}

window.onload=menuFix;

//--><!]]></script>

</head>

<body>

<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>

	<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>

	</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>

</body>

</html>

上面的代码如果在</li>后加入管道符"|"则会折行

不知道如何修改JS可以实现默认现实菜单一级的子





----------------

我尝试过在</li>后写"|"，但是被折行了！我也曾经想过是长度设置的不够，因此测试过程中，我将"菜单一级" 去了一个字，如"菜单一'，然后在</li>后加"|"，依旧被折行，不知道什么原因！
...全文
1779 7 打赏 收藏 转发到动态 举报
写回复
用AI写文章
7 条回复
切换为时间正序
请发表友善的回复…
发表回复
hbear 2010-05-03
  • 打赏
  • 举报
 回复
我怎么看不到回复
cloudgamer 2008-01-12
  • 打赏
  • 举报
 回复 
<!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>

</head>

<body>



<style type="text/css">

<!--

*{margin:0;padding:0;border:0;}

body {

    font-family: arial, 宋体, serif;

        font-size:12px;

}

#nav {

     line-height: 24px;  list-style-type: none; background:#666;

}

#nav a {

    display: block; width: 80px; text-align:center;

}

#nav a:link  {

    color:#666; text-decoration:none;

}

#nav a:visited  {

    color:#666;text-decoration:none;

}

#nav a:hover  {

    color:#FFF;text-decoration:none;font-weight:bold;

}

#nav li {

    float: left; width: 80px; background:#CCC;

}

#nav li a:hover{

    background:#999;

}

#nav li ul {

    line-height: 27px;  list-style-type: none;text-align:left;

    left: -999em; width: 980px; position: absolute; float:left;

}

#nav li ul li{

    float: left; width: 80px;

    background: #F6F6F6; 

}

#nav li ul a{

    display: block; width: 80px;text-align:center;

}

#nav li ul a:link  {

    color:#666; text-decoration:none;

}

#nav li ul a:visited  {

    color:#666;text-decoration:none;

}

#nav li ul a:hover  {

    color:#F3F3F3;text-decoration:none;font-weight:normal;

    background:#C00;

}

#nav li:hover ul {

    left: 0;

}

#nav li.sfhover ul {

    left: 0;

}

#content {

    clear: left; 

}

-->

</style>

<script>

function menuFix() {

    var sfEls = document.getElementById("nav").getElementsByTagName("li");

    for (var i=0; i<sfEls.length; i++) {

        sfEls[i].onmouseover=function() {

        	this.className="sfhover";

        }

        sfEls[i].onmouseout=function() {

        	this.className="";

        }

    }

	

	sfEls[0].onmouseover();

}

window.onload=menuFix;

</script>





<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 style="border-left:1px solid #000000;"><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>

</ul>







</body>

</html>
cloudgamer 2008-01-12
  • 打赏
  • 举报
 回复 
<!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>

</head>

<body>



<style type="text/css">

<!--

*{margin:0;padding:0;border:0;}

body {

    font-family: arial, 宋体, serif;

        font-size:12px;

}

#nav {

     line-height: 24px;  list-style-type: none; background:#666;

}

#nav a {

    display: block; width: 80px; text-align:center;

}

#nav a:link  {

    color:#666; text-decoration:none;

}

#nav a:visited  {

    color:#666;text-decoration:none;

}

#nav a:hover  {

    color:#FFF;text-decoration:none;font-weight:bold;

}

#nav li {

    float: left; width: 80px; background:#CCC;

}

#nav li a:hover{

    background:#999;

}

#nav li ul {

    line-height: 27px;  list-style-type: none;text-align:left;

    left: -999em; width: 980px; position: absolute; float:left;

}

#nav li ul li{

    float: left; width: 80px;

    background: #F6F6F6; 

}

#nav li ul a{

    display: block; width: 80px;text-align:center;

}

#nav li ul a:link  {

    color:#666; text-decoration:none;

}

#nav li ul a:visited  {

    color:#666;text-decoration:none;

}

#nav li ul a:hover  {

    color:#F3F3F3;text-decoration:none;font-weight:normal;

    background:#C00;

}

#nav li:hover ul {

    left: 0;

}

#nav li.sfhover ul {

    left: 0;

}

#content {

    clear: left; 

}

-->

</style>

<script type=text/javascript><!--//--><![CDATA[//><!--

function menuFix() {

    var sfEls = document.getElementById("nav").getElementsByTagName("li");

    for (var i=0; i<sfEls.length; i++) {

        sfEls[i].onmouseover=function() {

        this.className+=(this.className.length>0? " ": "") + "sfhover";

        }

        sfEls[i].onMouseDown=function() {

        this.className+=(this.className.length>0? " ": "") + "sfhover";

        }

        sfEls[i].onMouseUp=function() {

        this.className+=(this.className.length>0? " ": "") + "sfhover";

        }

        sfEls[i].onmouseout=function() {

        this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), 

"");

        }

    }

}

window.onload=function(){

	menuFix();

	document.getElementById("nav").getElementsByTagName("li")[0].onmouseover();

}

//--><!]]></script>





<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 style="border-left:1px solid #000000;"><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 style="border-left:1px solid #000000;"><a href="#">菜单三级</a>

    <ul>

    <li><a href="#">菜单三级</a></li>

    <li><a href="#">菜单三级</a></li>

    <li><a href="#">菜单三级</a></li>

    <li><a href="#">菜单三级</a></li>

    </ul>

</li>

<li style="border-left:1px solid #000000;"><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>







</body>

</html>
ccnp_Server 2008-01-12
  • 打赏
  • 举报
 回复
5# 非常感谢，理解了！


发现问题了，在MAXTHON就会出现结帖的那个问题！
cloudgamer 2008-01-12
  • 打赏
  • 举报
 回复
因为
#nav a {
display: block;


block :　 CSS1 块对象的默认值。将对象强制作为块对象呈递，为对象之后添加新行

就是a已经变成像div那样的“块”了

ccnp_Server 2008-01-12
  • 打赏
  • 举报
 回复
出了点小问题，暂时不能给份，先这里声明一下

主要是我回复了，在结帖时，我这里有20分，而且不能删除，但系统又不让给自己分...


我找管理区问下！
ccnp_Server 2008-01-12
  • 打赏
  • 举报
 回复
2# 相当符合需求，非常感谢！

3# 也很帅，脚本简单易懂，而且效果基本可以实现！ 非常感谢！

100分平分！

不过想问下，这样的脚本中，为什么不能在</li>后面加管道符呢？
CSS+js无限级折叠导航菜单
一个无限级分类的折叠导航菜单，大部分是用CSS实现，结合JavaScript技术，使这款菜单更加实用。压缩包内含有两上示例，一个横向菜单、一个竖向菜单，
JQuery&CSS;&CSS;+DIV实例大全.rar
2.js+css简单后台二级树形菜单demo示例 3.JS+CSS美化经典Select选项框插件 4.JS+CSS通用一个页面同时三个焦点图轮换效果完整实例 5.JS+CSS网页版模拟QQ登录框界面特效示例 6.JS+flash立柱广告代码仿百度MP3...
jQuery 带动态效果的两级横向导航菜单
内容索引:脚本资源,jQuery,动感菜单,水平导航菜单　jQuery 带动态效果的两级横向导航菜单，全部是由jquery+CSS代码完成，菜单很简洁，使用背景色平铺而成，因此没有使用GIF等图像资源，这个菜单可以两级展开，当把...
javascript经典效果示例
73个效果的实例 01:___CSS+JS滚动图片功能代码 02:___CSS使用图片完美修饰的全兼容圆角框 03:___CSS制作的类似相册浏览的功能 04:___CSS完成神奇创意的相框 05:___CSS实现自适应的图片背景边框 06:___CSS将图片自动...
基于CSS3实现的漂亮Menu菜单效果代码
四个圆角的方框整齐横向排列形成的菜单，当把鼠标放在任意菜单项的时候，该菜单项的底部会出现动画效果，一第向两端延伸的下划线，菜单整体挺漂亮的。 运行效果截图如下： 在线演示地址如下： ...
CSS

61,112

社区成员

60,730

社区内容

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

加载中

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

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

+ 用AI写文章