我该如何制作它以便我可以同时拥有水平和垂直导航栏？我是设计初学者的大宝贝，我想弄清楚我做错了什么，但我不确定如何在多个链接上使用CSS。
<body>
<div class="horizontallinks">
<ul>
<li> link1 </li>
<li>link 2</li>
<li>link 3</li>
<li>
<link 4</div>
<div class="verticallinks">
<ui>
<li>link a </li>
<li> link b</li>
<li> link c </li>
</div>
</ul>
</body>
CSS：
.horizontallinks {
position: fixed;
list-style-type: none;
margin-top: 70px;
margin-left: 300px;
padding: 0;
font-size: 18px;
overflow: hidden;
background-color: white;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.verticallinks {
position: fixed;
list-style-type: none;
padding: 0;
font-size: 18px;
margin-left: 45px;
margin-top: 165px;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li {
float: left;
}
li a {
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.horizontallinks {
position: fixed;
list-style-type: none;
margin-top: 70px;
margin-left: 300px;
padding: 0;
font-size: 18px;
overflow: hidden;
background-color: white;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.verticallinks {
position: fixed;
list-style-type: none;
padding: 0;
font-size: 18px;
margin-left: 45px;
margin-top: 165px;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li {
float: left;
}
li a {
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}<body>
<div class="horizontallinks">
<ul>
<li>link1</li>
<li>link 2</li>
<li>link 3</li>
<li>link 4</li>
</ul>
<div class="verticallinks">
<ul>
<li>link a</li>
<li>link b</li>
<li>link c</li>
</ul>
</div>
</div>
</body>试试这个
<body>
<h2 class="horizontallinks">
<ui class="make-inline">
<li>link1</li>
<li>link 2</li>
<li>link 3</li>
<li>link 4</li>
</ul>
</h2>
<div class="body-wrapper">
<div class="side-bar">
<ui>
<li>link a</li>
<li>link b</li>
<li>link c</li>
</ul>
</div>
<div class="body-style">
<!-- Body content -->
</div>
</div>
</body>
为具有大显示器的设备创建水平菜单并为具有较小显示器的设备创建垂直菜单会不会更好？
css media classes（mdn link）可用于此目的。
var close = document.getElementsByClassName("close");
var menu = document.getElementById("menu");
for (var i = 0; i < close.length; i++) {
close[i].addEventListener("click", function() {
menu.style.left = "-250px";
});
}body {
margin: 0;
}
#menu {
display: block;
border-radius: 5px;
background-color: #496D89;
height: 50px;
}
#menu ul {
font-size: 0em;
display: block;
height: 100%;
font-size: 2rem;
margin: 0 auto;
padding: 0;
list-style: none;
}
#menu ul li {
line-height: 1.5em;
display: inline-block;
padding: 0 0.2em;
height: 100%;
}
#menu ul li:hover {
background-color: #294F6D;
border-radius: 5px;
}
#menu ul li a {
color: white;
}
#menu ul li a:visited {
color: #F9CEE7;
}
#menu .close {
display: none;
}
@media (max-width: 600px) {
#menu {
position: absolute;
display: inline-block;
width: 300px;
height: auto;
transition: left 1s;
}
#menu ul {
width: auto;
}
#menu ul li {
display: block;
}
#menu .close {
display: initial;
position: absolute;
right: 0;
top: 0;
width: 50px;
height: 50px;
font-size: 2rem;
border-radius: 5px;
border: none;
background-color: #123652;
color: white;
cursor: pointer;
text-shadow: 2px 2px black;
}
.close:active {
background-color: #042037;
text-shadow: none;
}
}<nav id="menu" style="left:0px;">
<ul>
<li><a href="">Home</a>
</li>
<li><a href="">Link1</a>
</li>
<li><a href="">Link2</a>
</li>
<li><a href="">Link3</a>
</li>
<li><a href="">Link4</a>
</li>
<li><a href="">Link5</a>
</li>
</ul>
<button class="close">X</button>
</nav>你可以使用我创建它的代码，我是bootstrap 4的初学者，所以如果你在下面的代码注释中发现任何问题。谢谢！！！