在过去的几个月里，我一直在断断续续地编码，作为我当前工作的练习，并通过引导程序在我的网站右侧创建了一个浮动+滚动导航栏。但是，从 3 周的休息时间回到我的网站后，我发现导航栏突然坏了(没有更改任何代码)。我尝试查看代码，但我找不到任何问题，为什么它突然坏了。有人知道吗？
这是网站的旧图像(在使事情变得不那么块状之前)，显示了右侧导航栏的情况。 滚动时，栏也会改变颜色，无论页面向下多远(浮动)，它始终位于右侧。
编辑： 这就是右侧栏中断的方式(沿着屏幕顶部，不再浮动或滚动)
编辑 2： 检查后，我发现在 Edge 和 Internet Explorer 10 中一切正常Microsoft，但在谷歌浏览器中它坏了(无法检查其他浏览器)。
样式表代码
.rightjump {
margin: 0;
padding: 10px 10px 0px 0px;
list-style-type: none;
width: 180px;
position: fixed;
overflow: auto;
display: contents;
right: 0;
}
.rightjumplist {
display: block;
background-color: greenyellow;
padding: 8px 8px;
text-decoration: none;
color: black;
text-align: center;
border-bottom: 1px solid black;
border-radius: 5px 40px 5px 40px;
}
.rightjumplist:hover {
background-color: lightgray;
color: black;
}
.activelist.active {
background-color: forestgreen;
color: black;
}
主要网页代码：
<!DOCTYPE HTML>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<link rel="icon" href="images/logo-small.png">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title></title>
</head>
<body data-spy="scroll" data-target="#myScrollspy" data-offset="50">
<!--#Floating verticle contents bar-->
<nav>
<ul class="leftcontents">
<li class="leftcontentslist" style="background-color: lightgray"><img src=images/logo-large.png width="155px" height="155px"></li>
<li class="leftcontentslist"><a id="a01" href="home.html">Home</a></li>
<li class="leftcontentslist"><a id="a01" href="horizon1.html">New Horizon 1</a></li>
<li class="leftcontentslist"><a id="a01" href="horizon2.html">New Horizon 2</a></li>
<li class="leftcontentslist"><a id="a01" href="horizon3.html">New Horizon 3</a></li>
<li class="leftcontentslist"><a id="a01" href="try1.html">We Try 1</a></li>
<li class="leftcontentslist"><a id="a01" href="try2.html">We Try 2</a></li>
<li class="leftcontentslist"><a id="a01" href="can1.html">We Can 1</a></li>
<li class="leftcontentslist"><a id="a01" href="can2.html">We Can 2</a></li>
</ul>
</nav>
<!--#Floating verticle jump bar (right)-->
<nav class="navbar navbar-inverse" id="myScrollspy">
<ul id="navbar" class="rightjump nav nav-pills nav-stacked">
<li class="active activelist rightjumplist"><a id="a01" href="#Top">Top</a></li>
<li class="active activelist rightjumplist"><a id="a01" href="#Bingo">Bingo</a></li>
<li class="active activelist rightjumplist"><a id="a01" href="#Wordsearch">Wordsearch</a></li>
<li class="active activelist rightjumplist"><a id="a01" href="#PDF1">Activity</a></li>
<li class="active activelist rightjumplist"><a id="a01" href="#PDF2">Activity 2</a></li>
</ul>
</nav>
</html>
对不起，如果有任何错误，第一次在这里发布。感谢您的帮助^^
好的，所以快速浏览后，似乎"rightjump"元素上的显示元素设置不正确。目前是这样的：
.rightjump {
margin: 0;
padding: 10px 10px 0px 0px;
list-style-type: none;
width: 180px;
position: fixed;
overflow: auto;
display: contents;
right: 0;
}
您希望它看起来像这样：
.rightjump {
margin: 0;
padding: 10px 10px 0px 0px;
list-style-type: none;
width: 180px;
position: fixed;
overflow: auto;
display: block;
right: 0;
}
注意：我在这里所做的是将其从显示：内容更改为显示：块。希望这有帮助！