Javascript 为什么导航条向下滑动变细，然后变宽？
当你将鼠标悬停在我的网站上的nav li项目上时，它应该沿着nav ul项目向下滑动，但当它由于某种原因向下滑动时，它会变瘦，然后变宽。请看我的JSFIDLE并帮助我：D HTML: CSS:Javascript 为什么导航条向下滑动变细，然后变宽？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,当你将鼠标悬停在我的网站上的nav li项目上时，它应该沿着nav ul项目向下滑动，但当它由于某种原因向下滑动时，它会变瘦，然后变宽。请看我的JSFIDLE并帮助我：D HTML: CSS: 在动画期间，溢出设置为隐藏。动画完成后，内联溢出样式将被删除 在子菜单上设置了负边距，因此当动画正在进行时，父级之外的部分不可见 建议您删除负边距，并将设置为left:0，实际上，这只解决了一半问题。。。现在，左侧像正常情况一样向下移动，但右侧在动画完成后会展开…边距也会出现同样的问题 <
在动画期间，
溢出隐藏溢出样式将被删除
在子菜单
上设置了负边距，因此当动画正在进行时，父级之外的部分不可见
建议您删除负边距，并将
设置为left:0
，实际上，这只解决了一半问题。。。现在，左侧像正常情况一样向下移动，但右侧在动画完成后会展开…边距也会出现同样的问题
<body>
<header>
<nav>
<ul>
<li><a href="index.html">Home</a>
<ul>
<li><a href="about.html">About Me</a></li>
</ul>
</li>
<li><a href="purpose.html">Purposeful Living</a>
<ul>
<li><a href="purpose78.html">7th - 8th</a></li>
<li><a href="purpose910.html">9th - 10th</a></li>
<li><a href="purpose1112.html">11th - 12th</a></li>
</ul>
</li>
<li><a href="academic.html">Academic Excellence</a>
<ul>
<li><a href="purpose78.html">7th - 8th</a></li>
<li><a href="purpose910.html">9th - 10th</a></li>
<li><a href="purpose1112.html">11th - 12th</a></li>
</ul>
</li>
<li><a href="ethical.html">Ethical Responsibility</a>
<ul>
<li><a href="purpose78.html">7th - 8th</a></li>
<li><a href="purpose910.html">9th - 10th</a></li>
<li><a href="purpose1112.html">11th - 12th</a></li>
</ul>
</li>
</ul>
</nav>
</header>
<div id="headershow">Toggle Nav Bar</div>
<div id="mainnamesection">
<h1 id="mainname">
Title
</h1>
<div id="flyingsection">
</div>
<h1 id="mainname1">
<span id="smallname">Subtitle</span>
</h1>
</div>
</body>
$(document).ready(function() {
$("#smallname").click(function() {
$("html, body").animate({scrollTop: "0px"});
});
$("#headershow").click(function() {
$("header").slideToggle();
});
$(".grades td a").mouseover(function() {
$(this).animate({backgroundColor: "white", color: "black"}, 200);
$(this).mouseleave(function() {
$(this).animate({backgroundColor: "transparent", color: "white"}, 200);
});
});
$('nav li').hover(
function () {
$('ul', this).slideDown();
},
function () {
$('ul', this).stop().slideUp();
}
);
});
` @import url(http://fonts.googleapis.com/css?family=Open+Sans);
body {
background-image: url(file:///Users/jakesager/Desktop/Websites/Jake%20Sager/img/starrynight.jpg);
background-size: 110%;
background-position: center -100px;
background-attachment: fixed;
margin:0;
padding:0;
}
header {
width: 100%;
margin:auto;
background: rgba(255,255,255,0.7);
height: 60px;
z-index: 20;
display: none;
}
.inline {
display: inline-block;
}
#flyingbird {
height: 60px;
width: 90px;
left: 100px;
position: relative;
top: -30px;
}
#bird {
height: 60px;
width: 90px;
display: inline-block;
position: relative;
top: 15px;
z-index: 1;
}
#flyingsection {
width: 700px;
margin:auto;
margin-top: 0px;
margin-bottom: 0px;
}
nav {
height: 60px;
margin-top: 0px;
text-align: center;
z-index: 20;
}
nav ul ul {
display:none;
}
#headershow {
background-color: rgba(255,255,255,0.7);
position: static;
left: 0;
top: 0;
width: 125px;
text-align:center;
border-bottom-right-radius: 10px;
padding: 5px;
height: 20px;
cursor: pointer;
font-family: open sans;
}
nav ul {
list-style:none;
display: inline-table;
position:relative;
padding: 0;
font-family: open sans;
display: inline-block;
}
nav ul li {
float: left;
margin-top: -16px;
border-right: 2px solid black;
text-align:center;
height: 60px;
padding-left: 25px;
padding-right: 25px;
}
nav ul li:last-child {
border-right: none;
}
nav ul li a {
color:black;
text-decoration: none;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 5px;
padding-right: 5px;
position: relative;
top: 18px;
}
nav ul li:first-child {
border-left: 2px solid black;
}
nav ul li:last-child {
border-right: 2px solid black;
}
nav ul li:hover {
background: rgba(255,255,255,0.6)
}
nav ul ul {
position: absolute;
top: 100%;
z-index: 20;
}
nav ul ul li {
float:none;
background-color: rgba(255,255,255,0.82);
width: 100%;
margin-top: 0;
margin-left: -27px;
border-left: 2px solid black;
border-right: 2px solid black;
border-top: 1px solid black;
}
nav ul ul li:last-child {
border-bottom: 2px solid black;
}
nav ul ul li:hover {
background-color: rgba(255,255,255,0.9);
}
#mainnamesection {
width: 1050px;
margin:auto;
}
#mainname {
font-size: 180px;
font-family: open sans;
text-align:center;
margin-top: 20px;
color: white;
}
#mainname1 {
font-size: 180px;
font-family: open sans;
text-align:center;
color: white;
margin-top: -100px;
}
#smallname {
font-size: 50px;
font-family: open sans;
color: #47BCEA;
}
nav ul ul {
margin-left: 0;
}
.maincontent {
width: 100%;
margin-top: 30px;
padding-top: 7px;
padding-bottom: 10px;
color: white;
}
.maincontent p {
font-family: open sans;
margin-left: 20px;
font-size: 18px;
}
.maincontent h1 {
font-family: open sans;
margin-left: 20px;
}
.grades {
margin-left: 20px;
background-color: rgba(000,000,000, 0.7);
font-family: open sans;
font-size: 23px;
}
.grades td {
padding: 10px;
border-right: 2px solid white;
}
.grades td:last-child {
border: none;
}
.grades td a {
width: 100%;
color: white;
text-decoration: none;
padding: 5px;
}
.wrapper {
width: 941px;
margin:auto;
}
.maintitle {
font-family: Open sans;
margin-left: 20px;
}
.mainparagraph {
font-family: Open sans;
margin-left: 20px;
}