我想要THIS(我的意思是，相同的菜单系统(：https://i.stack.imgur.com/O5EtV.gif
我有这个(我的意思是，相同的菜单系统(：https://i.stack.imgur.com/ChI3e.gif
这是我得到的代码：
body {
margin: 0;
font-family: Helvetica;
}
.topnav {
overflow: hidden;
background-color: rgb(159,44,40);
height: 48px;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
#myprofile {
position: absolute;
right: 12.5px;
}
#mailshortcut {
position: absolute;
right: 57.5px;
}
#notif {
position: absolute;
right: 102.5px;
width: 69px;
padding: 14px 16px;
text-align: left;
}
#calendarshortcut {
position: absolute;
right: 170px;
text-align: left;
}
#search {
position: absolute;
right: 215.5px;
width: 50px;
padding: 14px 14px;
}
.topnav .unee {
color: #CDB26E;
text-transform: lowercase;
font-weight: 800;
}
.active {
font-weight: 800;
text-transform: lowercase;
position: absolute;
left: 54px;
}
#univlogo {
left: 25px;
top: 4px;
position: absolute;
}
.thelogo {
position: absolute;
right: 285px;
top: 4px;
}
.badge {
position: absolute;
top:12px;
right: 8px;
padding: 5px 8px;
border-radius: 50%;
background-color: rgb(209,91,71);
color: white;
font-size: 10px;
}
#phonetablet {display: none;}
@media screen and (max-width: 990px) {
.column {
float: left;
width: 100%;
padding: 10px;
height: 300px;
}
#phonetablet {
display: block;
}
.topnav .responsive a .active {
display: none;
}
#desktop {
display: none;
}
#myprofile {
position: absolute;
right: 0px;
width: 57px;
}
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
#univlogo {
left: 40px;
top: 4px;
position: absolute;
}
.thelogo {
position: absolute;
right: 285px;
top: 4px;
}
}
#archive {
background: #6e8cd0;
color: white;
margin-top: 0;
}
.sidenav {
height: 100%;
width: 200px;
position: fixed;
z-index: 1;
top: 48px;
left: 0;
background-color: #ddd;
overflow-x: hidden;
padding-top: 20px;
border-right: solid 1px #ccc;
}
.sidenav a {
padding: 6px 6px 6px 32px;
text-decoration: none;
font-size: 25px;
color: rgb(88,88,88);
display: block;
font-size: 20px;
border-top: #ccc solid 1px;
}
.first {
position: absolute;
top: 0;
width: 200px;
border: none;
border-top: none;
border-bottom: none;
}
.second {
position: absolute;
top: 37px;
width: 200px;
}
.secondhalf {
position: absolute;
top: 74px;
width: 200px;
}
.third {
position: absolute;
top: 111px;
width: 200px;
}
.fourth {
position: absolute;
top: 148px;
width: 200px;
}
.fifth {
position: absolute;
top: 185px;
width: 200px;
}
.sixth {
position: absolute;
top: 222px;
width: 200px;
border-bottom: #ccc solid 1px;
}
.seventh {
position: absolute;
top: 259px;
width: 200px;
border-bottom: #ccc solid 1px;
}
.sidenav a:hover {
color: rgb(159,44,40);
background: white;
}<!DOCTYPE html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="topnav" id="myTopnav">
<img id="univlogo" src="file:///Users/Ari/Library/Mobile%20Documents/com~apple~CloudDocs/SIMON/SIMON%20TRABAJOS/ai%20doll%20face/Renault%202006/NewLogo.jpg" width="40" height="40">
<img class="thelogo" id="desktop"src="file:///Users/Ari/Library/Mobile%20Documents/com~apple~CloudDocs/SIMON/SIMON%20TRABAJOS/ai%20doll%20face/Renault%202006/thelogo.png" height="40" width="60">
<img class="thelogo" id="phonetablet" src="file:///Users/Ari/Library/Mobile%20Documents/com~apple~CloudDocs/SIMON/SIMON%20TRABAJOS/ai%20doll%20face/Renault%202006/shortened%20logo.png" height="40" width="60">
<a href="file:///Users/Ari/Library/Mobile%20Documents/com~apple~CloudDocs/SIMON/SIMON%20TRABAJOS/ai%20doll%20face/Renault%202006/Users/AriadnaMi.html" id="desktop" style="color: #CDB26E;" class="active">UNEE</a>
</div>
<div class="sidenav">
<!-- Add font awesome icons -->
<a class="first" id="archive" href="#"> <i class="fa fa-archive"></i><strong> Histórico</strong></a>
<a class="second" href="file:///Users/Ari/Library/Mobile%20Documents/com~apple~CloudDocs/SIMON/SIMON%20TRABAJOS/ai%20doll%20face/Renault%202006/Users/AriadnaMi.html"><i class="fa fa-tachometer"></i> <strong>Mi espacio</strong></a>
<a class="secondhalf" href="#"><i class="fa fa-comments-o"></i> uneeChat</a>
<a class="third" href="#"><i class="fa fa-cloud"></i> uneeCloud</a>
<a class="fourth" href="#"><i class="fa fa-calendar"></i> Asistencia</a>
<a class="fifth" href="file:///Users/Ari/Library/Mobile%20Documents/com~apple~CloudDocs/SIMON/SIMON%20TRABAJOS/ai%20doll%20face/Renault%202006/Users/Ariadna%20Mi%20Evaluation.html"><i class="fa fa-check-square-o"></i> Evaluaciones</a>
<a class="sixth" href="#"><i class="fa fa-film"></i> Cuatrimestres</a>
<a class="seventh" href="#"><i style="font-style: italic !important;"class="fa fa-book"></i> Comisiones</a>
</div>
</body>"style.css"是上面的css代码。
那么，告诉我该怎么做才能得到想要的菜单。
我曾经尝试过一次自己制作的代码，但我无法使其工作。此外，我已经在互联网上的所有论坛和编码网站上搜索了解决方案，但我仍然找不到答案。
求你了。你能解决我的问题吗？提前谢谢你！
附言：里面的链接就是图片。
您可以使用媒体查询使您的网站内容对屏幕大小做出响应，对于折叠导航，如果您喜欢使用构建代码，它可以在引导程序中使用