jquery 菜单hover时的问题
<!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>
<title>jQuery有动画淡出的二级折叠菜单代码</title>
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<SCRIPT>
$(document).ready(function() {
$('#menu ul').hide();
$('#menu li').hover(function() {
//$(this).children('ul').slideDown().end().siblings().children('ul').slideUp();
$(this).children('ul').fadeIn().end().siblings().children('ul').fadeOut();
//return false;
// function(){
// $(this).children('ul').fadeOut();
// }
});
});
</SCRIPT>
<style type="text/css">
#menu{ list-style-type:none; margin: 0; padding: 0; width: 150;float: left; }
#menu a { display: block; text-decoration: none; }
#menu li { margin-bottom: 1px;float: left;}
#menu li li{ margin-bottom: 1px;float: left;}
#menu li a { background: #686826; color: #fff; padding: 5px; }
#menu li a:hover { background:#7F2929;}
#menu li ul li a { background: #ccc; color: #000; padding-left: 0px; }
#menu li ul li a:hover { background: #7F2929; border-left: 5px #000 solid; padding-left: 15px; } </style>
</head>
<body>
<ul id="menu">
<li><a href="#">校区概览</a>
<ul>
<li><a href="#">地理位置图</a>
<ul>
<li><a href="#">学高为师</a></li>
<li><a href="#">青出于蓝</a></li>
<li><a href="#">教师专访</a></li>
</ul></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>
</ul>
</li>
</ul>
</body>
</html>
如何使这横排。且鼠标放上时不会撑开得那么乱。二级和一级对齐横排。
需要修改哪些代码呢？ 展开
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery有动画淡出的二级折叠菜单代码</title>
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<SCRIPT>
$(document).ready(function() {
$('#menu ul').hide();
$('#menu li').hover(function() {
//$(this).children('ul').slideDown().end().siblings().children('ul').slideUp();
$(this).children('ul').fadeIn().end().siblings().children('ul').fadeOut();
//return false;
// function(){
// $(this).children('ul').fadeOut();
// }
});
});
</SCRIPT>
<style type="text/css">
#menu{ list-style-type:none; margin: 0; padding: 0; width: 150;float: left; }
#menu a { display: block; text-decoration: none; }
#menu li { margin-bottom: 1px;float: left;}
#menu li li{ margin-bottom: 1px;float: left;}
#menu li a { background: #686826; color: #fff; padding: 5px; }
#menu li a:hover { background:#7F2929;}
#menu li ul li a { background: #ccc; color: #000; padding-left: 0px; }
#menu li ul li a:hover { background: #7F2929; border-left: 5px #000 solid; padding-left: 15px; } </style>
</head>
<body>
<ul id="menu">
<li><a href="#">校区概览</a>
<ul>
<li><a href="#">地理位置图</a>
<ul>
<li><a href="#">学高为师</a></li>
<li><a href="#">青出于蓝</a></li>
<li><a href="#">教师专访</a></li>
</ul></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>
</ul>
</li>
</ul>
</body>
</html>
如何使这横排。且鼠标放上时不会撑开得那么乱。二级和一级对齐横排。
需要修改哪些代码呢？ 展开
展开全部
没改别的，只重设了几个样式：
<!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>
<title>jQuery有动画淡出的二级折叠菜单代码</title>
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<SCRIPT>
$(document).ready(function() {
$('#menu ul').hide();
$('#menu li').hover(function() {
//$(this).children('ul').slideDown().end().siblings().children('ul').slideUp();
$(this).children('ul').fadeIn().end().siblings().children('ul').fadeOut();
//return false;
// function(){
// $(this).children('ul').fadeOut();
// }
});
});
</SCRIPT>
<style type="text/css">
#menu{ list-style-type:none; margin: 0; padding: 0; width: 150;float: left; }
#menu a { display: block; text-decoration: none; }
#menu li { margin-bottom: 1px;float: left;}
#menu li li{ margin-bottom: 1px;float: left;}
#menu li a { background: #686826; color: #fff; padding: 5px; float:left;}
#menu li a:hover { background:#7F2929;}
#menu li ul{float:left; margin:0px; padding:0px;}
#menu li ul li a { background: #ccc; color: #000; padding-left: 0px; }
#menu li ul li a:hover { background: #7F2929; border-left: 5px #000 solid; padding-left: 15px; } </style>
</head>
<body>
<ul id="menu">
<li><a href="#">校区概览</a>
<ul>
<li><a href="#">地理位置图</a>
<ul>
<li><a href="#">学高为师</a></li>
<li><a href="#">青出于蓝</a></li>
<li><a href="#">教师专访</a></li>
</ul></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>
</ul>
</li>
</ul>
</body>
</html>
<!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>
<title>jQuery有动画淡出的二级折叠菜单代码</title>
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<SCRIPT>
$(document).ready(function() {
$('#menu ul').hide();
$('#menu li').hover(function() {
//$(this).children('ul').slideDown().end().siblings().children('ul').slideUp();
$(this).children('ul').fadeIn().end().siblings().children('ul').fadeOut();
//return false;
// function(){
// $(this).children('ul').fadeOut();
// }
});
});
</SCRIPT>
<style type="text/css">
#menu{ list-style-type:none; margin: 0; padding: 0; width: 150;float: left; }
#menu a { display: block; text-decoration: none; }
#menu li { margin-bottom: 1px;float: left;}
#menu li li{ margin-bottom: 1px;float: left;}
#menu li a { background: #686826; color: #fff; padding: 5px; float:left;}
#menu li a:hover { background:#7F2929;}
#menu li ul{float:left; margin:0px; padding:0px;}
#menu li ul li a { background: #ccc; color: #000; padding-left: 0px; }
#menu li ul li a:hover { background: #7F2929; border-left: 5px #000 solid; padding-left: 15px; } </style>
</head>
<body>
<ul id="menu">
<li><a href="#">校区概览</a>
<ul>
<li><a href="#">地理位置图</a>
<ul>
<li><a href="#">学高为师</a></li>
<li><a href="#">青出于蓝</a></li>
<li><a href="#">教师专访</a></li>
</ul></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>
</ul>
</li>
</ul>
</body>
</html>
追问
不是这个效果。。
是要这样：
校区概览
地理位置图 学高为师 青出于蓝 教师专访 校区概况 大事记 管理机
小类在下面弹出来。其余类推。
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
