我正在我的OJT经历的投资组合网站上工作。这是一个为期3天的项目，即将完成。
我的问题是我想打开侧边栏导航以及打开其他页面时的下拉链接。例如，如果我在主页上，然后单击侧边栏上的“基本原理”页面，则进入带侧边栏的“基本原理”页面，并从上一页（此示例中为“首页”）下拉菜单。每个页面都需要相同的内容。如果可以的话，我想尽可能地保留当前代码，只添加新代码。
很抱歉，如果代码混乱，我必须重新学习该项目的HTML和CSS，因为我不是很熟悉，也没有太多的Web开发经验。谢谢。
HTML侧边栏和下拉列表
<div class="sidebar">
<nav id='navigation' class="navigation">
<div id="menuToggle" class="menuToggle">
<input type="checkbox" />
<span></span>
<span></span>
<span></span>
<ul id="menu">
<button class="dropdown-btn">Introduction
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-container">
<a href="F:/website-ojt/introduction/intro.html#rationale">Rationale</a>
<a href="F:/website-ojt/introduction/intro.html#work-expectation">Work Expectation</a>
<a href="F:/website-ojt/introduction/intro.html#contact-details">Contact Details</a>
<a href="F:/website-ojt/introduction/intro.html#company-profile">Company Profile</a>
<a href="F:/website-ojt/introduction/intro.html#company-size">Company Size</a>
<a href="F:/website-ojt/introduction/intro.html#nature-business">Nature of Business</a>
<a href="F:/website-ojt/introduction/intro.html#divisions">Divisions/Departments</a>
<a href="F:/website-ojt/introduction/intro.html#organizational-chart">Organizational Chart</a>
<a href="F:/website-ojt/introduction/intro.html#company-pics0">Pictures of the Company</a>
</div>
<button class="dropdown-btn">Observation
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-container">
<a href="F:/website-ojt/observation/observe.html#SWOT">SWOT Analysis</a>
<a href="F:/website-ojt/observation/observe.html#overall-observations">Overall Observation</a>
</div>
<button class="dropdown-btn">Anecdotal Reports
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-container">
<a href="F:/website-ojt/anecdotalreports/anecreport.html">Periodic Reports</a>
<a href="F:/website-ojt/anecdotalreports2/anecreport2.html#prof-train">Professional Experiences and Training</a>
<a href="F:/website-ojt/anecdotalreports2/anecreport2.html#tasks-assign">Tasks and Assignments</a>
<a href="F:/website-ojt/anecdotalreports2/anecreport2.html#prob-enc">Problems Encountered</a>
<a href="F:/website-ojt/anecdotalreports2/anecreport2.html#out-ach">Outstanding Achievements</a>
<a href="F:/website-ojt/anecdotalreports2/anecreport2.html#sal-prac">Salient Practices</a>
<a href="F:/website-ojt/anecdotalreports2/anecreport2.html#rel-cho">Relevance of the Chosen Training</a>
<a href="F:/website-ojt/anecdotalreports2/anecreport2.html#overall-exp">Overall Experiences</a>
</div>
<button class="dropdown-btn">Appendix
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-container">
<a href="F:/website-ojt/appendix/appendix.html#reco-lett">Practicum Recommendation Letter</a>
<a href="F:/website-ojt/appendix/appendix.html#liab-waiv">Agreement & Liability Waiver</a>
<a href="F:/website-ojt/appendix/appendix.html#eval-repo">Performance Evaluation Report</a>
<a href="F:/website-ojt/appendix/appendix.html#cert-hour">Certificate of Hours Worked</a>
<a href="F:/website-ojt/appendix/appendix.html#atte-sum0">Attendance Summary</a>
<a href="F:/website-ojt/appendix/appendix.html#pics-work">Pictures while in Actual Work</a>
<a href="F:/website-ojt/appendix/appendix.html#prof-resu">Professional Resume</a>
</div>
</ul>
</div>
</nav>
<script src="intro.js"></script>
</div>
CSS设置边栏样式
#menu a{
padding:10px 10px 10px 30px;
text-decoration:none;
font-size:20px;
color:#fff;
display:block;
transition: color 0.3s ease;
}
#menu a:hover{
color:rgb(153, 153, 153);
}
#menuToggle::before{
/* display:block;
position: absolute;
content: "OJT Portfolio";
width:144px;
font-size: 18px;
color:#f2f2f2;
top: 1px;
right: 44px; */
}
#menuToggle
{
display: block;
position: absolute;
top: 22px;
right: 22px;
z-index: 1;
-webkit-user-select: none;
user-select: none;
}
#menuToggle input
{
display: block;
width: 40px;
height: 32px;
position: absolute;
top: -7px;
left: -5px;
cursor: pointer;
opacity: 0;
z-index: 2;
-webkit-touch-callout: none;
}
#menuToggle span
{
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
position: relative;
background: #cdcdcd;
border-radius: 3px;
z-index: 1;
transform-origin: 4px 0px;
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
opacity 0.55s ease;
}
#menuToggle span:first-child
{
transform-origin: 0% 0%;
}
#menuToggle span:nth-last-child(2)
{
transform-origin: 0% 100%;
}
#menuToggle input:checked ~ span
{
opacity: 1;
transform: rotate(45deg) translate(-2px, -1px);
background: #232323;
}
#menuToggle input:checked ~ span:nth-last-child(3)
{
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
#menuToggle input:checked ~ span:nth-last-child(2)
{
opacity: 1;
transform: rotate(-45deg) translate(0, -1px);
}
#menu
{
position: absolute;
height: 100vh;
width: 300px;
padding-bottom: 100%;
margin: -100px 0 0 0;
padding: 40px;
padding-top: 167px;
padding-left: 20px;
right: -60px;
background: #181818;
list-style-type: none;
-webkit-font-smoothing: antialiased;
transform-origin: 0% 0%;
transform: translate(100%, 0);
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}
#menu li
{
padding: 10px 0;
/* padding:0 10px 0 0; */
font-size: 22px;
}
#menuToggle input:checked ~ ul
{
transform: scale(1.0, 1.0);
opacity: 1;
}
.dropdown-btn {
font-family: 'Anonymous Pro', monospace;
padding: 22px 22px 22px 22px;
text-decoration: none;
font-size: 22px;
color: #ffffff;
display: block;
border: none;
background: none;
width:100%;
text-align: left;
cursor: pointer;
outline: none;
}
.sidenav a:hover, .dropdown-btn:hover {
color: #818181;
}
.active {
background-color: #2e2e2e;
color: white;
}
.dropdown-container {
display: none;
background-color: #262626;
padding-left: 8px;
}
.fa-caret-down {
float: right;
padding-right: 8px;
}