网页css+div（js）简单布局

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/... <!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=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
$(function(){
$('.nav li').hover(
function(){
$(this).children('ul').css({ display:'block'});
}, function(){
$(this).children('ul').css({ display:'none'});
});
});
</script>
<style type="text/css">
*{ margin:0px; padding:0;}
body{ font:11px Verdana, Geneva, sans-serif; background: #444;}
ul{ list-style:none;}
a{ color:black; text-decoration:none;}

.nav{ height:30px; background:url(images/20140301031313.jpg) repeat-x; margin-top:20px; padding-left:20px;}
.nav li{ float:left; position:relative;}
.nav li a{ display:block; padding:0 20px; height:30px; line-height:30px; float:left; }

.nav li a:hover{ background:url(images/20140301031313.jpg) repeat-x 0 -30px; }
.nav li ul{ position:absolute; width:200px; background:#eee; border:1px solid black; display:none; }
.nav li ul a{ width:160px;}
.secondary-menu{ left:0; top:30px;}
.three-tier-menu{ left:200px; top:-1px;}

.nav li:hover{ background:url(images/20140301031313.jpg) repeat-x 0 -30px; display:block;}
li:hover ul,.over ul { display:block;}
</style>
</head>

<body>
<ul class="nav">
<li><a href="#">Redhat</a>
<ul class="secondary-menu">
<li><a href="#">Redhat</a>
<ul class="three-tier-menu">
<li><a href="#">Red Hat Linux</a></li>
<li><a href="#">Red Hat Linux</a></li>
<li><a href="#">Red Hat Linux</a></li>
<li><a href="#">Red Hat Linux</a></li>
<li><a href="#">Red Hat Linux</a></li>
</ul>
</li>
<li><a href="#">Fedorat</a>
<ul class="three-tier-menu">
<li><a href="#">Fedora Core 1</a></li>
<li><a href="#">Fedora Core 2</a></li>
<li><a href="#">Fedora Core 3</a></li>
<li><a href="#">Fedora Core 4</a></li>
<li><a href="#">Fedora Core 5</a></li>
</ul>
</li>
<li><a href="#">Redhat Enterprise Linux</a>
<ul class="three-tier-menu">
<li><a href="#">Redhat Enterprise Linux1</a></li>
<li><a href="#">Redhat Enterprise Linux2</a></li>
<li><a href="#">Redhat Enterprise Linux3</a></li>
<li><a href="#">Redhat Enterprise Linux4</a></li>
<li><a href="#">Redhat Enterprise Linux5</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Opensuse</a></li>
</ul>
</body>
</html>
为什么js函数function不起作用？我按视频上做的，求高手帮忙。。。展开

 我来答

3个回答

#热议# 网上掀起『练心眼子』风潮，真的能提高情商吗？

猴子请来的妖妖
2014-03-01 · TA获得超过1086个赞

知道小有建树答主

回答量：409

采纳率：66%

帮助的人：144万

我也去答题访问个人页

关注

展开全部

给你一个 JQuery的文件，你添加到<head>里就可以了。

本回答由提问者推荐

已赞过 已踩过<

评论收起

seo呆子
2014-03-01 · 知道合伙人互联网行家

seo呆子
知道合伙人互联网行家

采纳数：429 获赞数：1132

毕业于黄河理工大小。网站行业从业5年经验，曾从事网站优化、网络推广及服务器安全等相关工作。

向TA提问私信TA

关注

展开全部

唉，你这种function使用方式是ajax或jquery形式的，必须要引用jquery基本的脚本文件啊。/js/jquery.js和/js/StringTrim.js。去网上找一下吧。

已赞过 已踩过<

评论收起

上邪Shangyes
2014-03-01

知道答主

回答量：81

采纳率：0%

帮助的人：28.1万

我也去答题访问个人页

关注

展开全部

太长不看，可能是你没有调用函数

已赞过 已踩过<

评论收起

更多回答（1）

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

网页css+div（js） 简单布局

其他类似问题

为你推荐：

网页css+div（js）简单布局