左侧导航菜单

qq_31842135 2015-10-08 08:06:42
请大家帮忙看下面这段代码的问题出在哪里?动态部分无法实现。
<!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>
<!--声明当前页面编码集charset=gbk中文编码gb2321;charset=utf-8国际编码-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>导航</title>
<style type="text/css">
*{
margin:
0px; padding:0px;
text-decoration:
none;
}
#Nav{
width:220px;
height:480px;
background:#F0F;
margin-left:100px;
margin-top:30px;
}
#Nav .title{
width:220px;
height:50px;
background:#00F
url(t/07.png)no-repeat
15px 19px;
color:#FFF;
font-size:18px;
font-family:Verdana, Geneva, sans-serif;
line-height:50px;
text-indent:45px;
height:
40px;
line-height:
40px;
}
#Nav ul li{
width:
220px;
height:70px;
background:#06F;
list-style-type:none;
border-bottom:
1px solid #00F;
position:relative;}
#Nav ul li h3{
background-color:
#0033ff;
font-family:
Verdana, Geneva, sans-serif;
font-weight:100;
text-indent:
16px;
height:
34px;
line-height:
35px;
background:
url(t/ico0.png)no-repeat 200px;
}
#Nav ul li h3 a{
color:
#FFF;
}
#Nav ul li p {
font-size:
14px;
font-family:
Verdana, Geneva, sans-serif;
text-indent:
15px;
}
#Nav ul li p a{
color:#FFF;
padding-right:
10px;
}
#Nav ul li p a:hover{
text-decoration:
underline;
}
.menu{width: 400px;
height: 280px;border: 2px
solid #0000ff;
left: 220px;top: 0px;
position:absolute;display:none;}
#Nav ul li.hover{background:#0033ff;}
#Nav ul li.hover h3{background:
url(t/ico0.png)no-repeat 200px;}
</style>
</head>

<body>
<div id="Nav">
<div class="title">全部课程</div>
<ul>
<li class="hover">
<h3><a href="#">职业技能</a></h3>
<p><a href="#">职场技能</a><a href="#">营销策略</a>
<a href="#">人才管理</a></p>
<div class="menu"></div>
</li>
<li>
<h3><a href="#">职业技能</a></h3>
<p><a href="#">职场技能</a><a href="#">营销策略</a>
<a href="#">人才管理</a></p>
<div class="menu"></div>
</li>
<li>
<h3><a href="#">职业技能</a></h3>
<p><a href="#">职场技能</a><a href="#">营销策略</a>
<a href="#">人才管理</a></p>
<div class="menu"></div>
</li>
<li>
<h3><a href="#">职业技能</a></h3>
<p><a href="#">职场技能</a><a href="#">营销策略</a>
<a href="#">人才管理</a></p>
<div class="menu"></div>
</li>
<li>
<h3><a href="#">职业技能</a></h3>
<p><a href="#">职场技能</a><a href="#">营销策略</a>
<a href="#">人才管理</a></p>
<div class="menu"></div>
</li>
<li>
<h3><a href="#">职业技能</a></h3>
<p><a href="#">职场技能</a><a href="#">营销策略</a>
<a href="#">人才管理</a></p>
<div class="menu"></div>
</li>
<li>
<h3><a href="#">职业技能</a></h3>
<p><a href="#">职场技能</a><a href="#">营销策略</a>
<a href="#">人才管理</a></p>
<div class="menu"></div>
</li>


</ul>
</div><!--引用外部js文件-->
<script type="text/javascript" src="js/slides.jquery.js"></script>
<script type="text/javascript">
$("#Nav ul li").mouseover(function(){
$(this).addClas("hover");
$(this).find(".menu").show();
}).mouseout(function(){
$(this).removeClass("hover");
$(this).find(".menu").hidden();
});
</script>
</body>
</html>
...全文
92 3 打赏 收藏 转发到动态 举报
写回复
用AI写文章
3 条回复
切换为时间正序
请发表友善的回复…
发表回复
Go 旅城通票 2015-10-09
  • 打赏
  • 举报
回复
没有效果就是你jquery路径错了
   <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.1.min.js"></script>
    <script type="text/javascript">
        $("#Nav ul li").mouseover(function () {
            $(this).addClass("hover");
            $(this).find(".menu").show();
        }).mouseout(function () {
            $(this).removeClass("hover");
            $(this).find(".menu").hide();
        });
    </script>
qq_31842135 2015-10-08
  • 打赏
  • 举报
回复
还是不行吧知道怎么回事
Go 旅城通票 2015-10-08
  • 打赏
  • 举报
回复
$("#Nav ul li").mouseover(function () { $(this).addClass("hover"); $(this).find(".menu").show(); }).mouseout(function () { $(this).removeClass("hover"); $(this).find(".menu").hide(); });

87,888

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

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