html+js+css代码没有如期效果，新手【二级联动下拉菜单】

html<head><metacharset="UTF-8"><title></title><linkhref="i.css"rel="stylesheet"type="... html
<head>
<meta charset="UTF-8">
<title></title>
<link href="i.css" rel="stylesheet" type="text/css" />
<script src="i.js"></script>
</head>
<body>
<nav>
<div class="container">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li>
<a href="#">Categories<i class='fa fa-angle-down'></i></a>
<ul>
<li><a href="#">Category One</a></li>
<li><a href="#">Category Two</a></li>
<li><a href="#">Category Three</a></li>
</ul>
</li>
<li class='sub-menu'>
<a href="#">Services<i class='fa fa-angle-down'></i></a>
<ul>
<li><a href="#">Service One</a></li>
<li><a href="#">Service Two</a></li>
<li><a href="#">Service Three</a></li>
<li><a href="#">Service Four</a></li>
<li><a href="#">Service Five</a></li>
<li><a href="#">Service Six</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</nav>
js
$('nav li').hover(
function() {
$('ul', this).stop().slideDown(200);
},
function() {
$('ul', this).stop().slideUp(200);
}
);
css
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
background: #fafafa;
font-family: "Roboto", sans-serif;
font-size: 14px;
margin: 0;
}
a {
text-decoration: none;
}
.container {
width: 1000px;
margin: auto;
}
/* Navigation Styles */
nav {
background: #2ba0db;
}
nav ul {
font-size: 0;
margin: 0;
padding: 0;
}
nav ul li {
display: inline-block;
position: relative;
}
nav ul li a {
color: #fff;
display: block;
font-size: 14px;
padding: 15px 14px;
transition: 0.3s linear;
}
nav ul li:hover {
background: #126d9b;
}
nav ul li ul {
border-bottom: 5px solid #2ba0db;
display: none;
position: absolute;
width: 250px;
}
nav ul li ul li {
border-top: 1px solid #444;
display: block;
}
nav ul li ul li:first-child {
border-top: none;
}
nav ul li ul li a {
background: #373737;
display: block;
padding: 10px 14px;
}
nav ul li ul li a:hover {
background: #126d9b;
}
nav .fa.fa-angle-down {
margin-left: 6px;
} 展开

 我来答

1个回答

#热议# 发烧为什么不能用酒精擦身体来退烧？

我命如天不如妖
2016-07-02 · TA获得超过1250个赞

知道小有建树答主

回答量：1875

采纳率：0%

帮助的人：737万

我也去答题访问个人页

关注

展开全部

<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
    html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
body {
  background: #fafafa;
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  margin: 0;
}
a {
  text-decoration: none;
}
.container {
  width: 1000px;
  margin: auto;
}
/* Navigation Styles */
nav {
  background: #2ba0db;
}
nav ul {
  font-size: 0;
  margin: 0;
  padding: 0;
}
nav ul li {
  display: inline-block;
  position: relative;
}
nav ul li a {
  color: #fff;
  display: block;
  font-size: 14px;
  padding: 15px 14px;
  transition: 0.3s linear;
}
nav ul li:hover {
  background: #126d9b;
}
nav ul li ul {
  border-bottom: 5px solid #2ba0db;
  display: none;
  position: absolute;
  width: 250px;
}
nav ul li ul li {
  border-top: 1px solid #444;
  display: block;
}
nav ul li ul li:first-child {
  border-top: none;
}
nav ul li ul li a {
  background: #373737;
  display: block;
  padding: 10px 14px;
}
nav ul li ul li a:hover {
  background: #126d9b;
}
nav .fa.fa-angle-down {
  margin-left: 6px;
}
    </style>
 <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
	    $('.navs li').hover(function(){
	        $(this).find(".submenu").stop(true,true).slideDown(500);
	    },function(){
	        $(this).find(".submenu").slideUp();
	    });
	});
</script>
</head>
<body>
<nav>
	<div class="container">
		<ul class="navs">
			<li>
				<a href="#">Home</a>
			</li>
			<li>
				<a href="#">About Us</a>
			</li>
			<li>
				<a href="#">
					Categories <i class='fa fa-angle-down'></i>
				</a>
				<ul class="submenu">
					<li>
						<a href="#">Category One</a>
					</li>
					<li>
						<a href="#">Category Two</a>
					</li>
					<li>
						<a href="#">Category Three</a>
					</li>
				</ul>
			</li>
			<li class='sub-menu'>
				<a href="#">
					Services <i class='fa fa-angle-down'></i>
				</a>
				<ul class="submenu">
					<li>
						<a href="#">Service One</a>
					</li>
					<li>
						<a href="#">Service Two</a>
					</li>
					<li>
						<a href="#">Service Three</a>
					</li>
					<li>
						<a href="#">Service Four</a>
					</li>
					<li>
						<a href="#">Service Five</a>
					</li>
					<li>
						<a href="#">Service Six</a>
					</li>
				</ul>
			</li>
			<li>
				<a href="#">Contact Us</a>
			</li>
		</ul>
	</div>
</nav>

你是不是没有加上jquery的版本啊，你可以选着在本地链接一个jquery库，或者像我这样加上一个cdn加速的服务器上的jquery，然后将你的js代码改掉了，建议你给标签加上class属性这样好控制其样式和js

本回答由提问者推荐

已赞过 已踩过<

评论收起

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

html+js+css代码没有如期效果，新手【二级联动下拉菜单】

其他类似问题

为你推荐：