【发布时间】：2020-05-19 00:40:01
【问题描述】：
我正在开发一个网站，而 CSS 让我头疼不已…… 我目前想要的是一个顶部水平固定导航栏和一个左侧垂直固定导航栏。 我希望垂直的刚好低于水平。 我有这个：
@charset "UTF-8";
/* Général ------------------------------------------------------------------------------------- */
body, p, legend, label, input {
font: normal 8pt verdana, helvetica, sans-serif;
}
html{
color:white;
width:100%;
height:100%;
background-image: linear-gradient(to bottom, #151515, #202020);
background-repeat: no-repeat;
}
a{
font-style: none;
}
/* Forms --------------------------------------------------------------------------------------- */
fieldset {
padding: 15px;
padding-bottom:8px;
border: 2px #0568CD outset;
border-radius: 2em;
margin: 15px;
}
fieldset>strong {
margin-right: 5px;
}
legend {
font-weight: bold;
color: #0568CD;
font-size: 9pt;
}
form label {
float: left;
width: 200px;
margin: 3px 0px 0px 0px;
font-weight: bold;
font-size: 7pt;
}
form input {
margin: 3px 3px 0px 0px;
border: 1px rgb(100,100,100,0.7) solid;
border-radius: 0.5em;
padding: 3px;
padding-left: 10px;
}
form input.sansLabel {
margin-left: 150px;
}
/* Styles et couleurs -------------------------------------------------------------------------- */
.required {
color: #c00;
}
.error {
color: #900;
}
.success {
color: #090;
}
.info {
font-style: italic;
color: #E8A22B;
}
.ADMIN {
color: #ea0000;
margin: 5px;
}
.OTHER {
color: #00bf00;
margin: 5px;
}
/* bouttons ----------------------------------------------------------------*/
.Button{
padding:0.3em 1.2em;
margin:0 0.1em 0.1em 0;
border:0.16em solid rgba(0,0,0,0.25);
border-radius:2em;
box-sizing: border-box;
text-decoration:none;
font-family:'Roboto',sans-serif;
font-weight:300;
color:#FFFFFF;
text-shadow: 0 0.04em 0.04em rgba(0,0,0,0.35);
text-align:center;
transition: all 0.2s;
}
.Button:hover{
border-color: rgba(10,10,10,0.6);
border-right-width: 0.4em;
border-style: outset;
}
/* NAVBAR --------------------------------------------------------------------------------------- */
div#nav{
}
nav#navbarH{
display:block;
background-color: #333;
font-size: 30;
top: 0;
left: 0;
width: 100%;
position:fixed;
text-align: center;
}
nav#navbarV{
display:inline-block;
float:none;
background-color: #808000;
font-size: 30;
left: 0;
height:100%;
position:fixed;
width:15%;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.left{float:left;}
.right{float:right;}
li {
float: left;
font-size: 30;
}
li.active{
background-color: #4CAF50;
font-weight: bold;
}
.left>li.active , .left li.navBtn.active>a:active{
border-bottom-right-radius: 30%;
border-bottom-left-radius: 0.5em;
}
.right>li.active , .right li.navBtn.active>a:active{
border-bottom-left-radius: 30%;
border-bottom-right-radius: 0.5em;
}
li a,li.dropdown a.dropbtn {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 30;
}
li:not(.active)>a:hover, .dropdown:hover .dropbtn {
background-color: #111;
}
li.dropdown {
display: block;
}
.dropdown-content {
display: none;
position: relative;
background-color: #202020;
text-align: center;
}
.dropdown-content a {
position: relative;
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: center;
}
.dropdown-content a:hover {background-color: #214b23;}
.dropdown-content a:active {background-color: #3e8e42;}
.dropdown:hover,.dropdown:hover>a.dropbtn{
position:relative;
width:auto;
}
.dropdown:hover .dropdown-content {
display: block;
float: none;
position:absolute;
width:auto;
}
.dropdown:hover .dropbtn:active {background-color: #4CAF50;}
li.navBtn>a:active {background-color: #4CAF50;}
li.navBtn.active>a:active{background-color: #18e2a0;}
@media screen and (max-width: 400px) {
nav#navbarH{float:none;display:inline-block;}
ul{float:none;display:block;width:100%;}
li{float:none;display:block;width:100%;}
.dropdown:hover .dropdown-content {position:relative;}
} <header>
<div id="nav">
<nav id="navbarH">
<ul class="navbar left">
<li class="navBtn ${ page == 'index' ? 'active' : '' } "><a href="#">Home</a></li>
</ul>
<ul class="navbar right">
<li class="navBtn ${ page == 'userProfile' ? 'active' : '' } "><a href="#">
username</li>
<li class="navBtn dropdown ${ page == 'adminPages' ? 'active' : '' } ">
<a class="dropbtn" href="#">Admin</a>
<div class="dropdown-content">
<a href="#">Add Track</a>
<a href="#">Add Album</a>
<a href="#">Add Genre</a>
<a href="#">Add Performer</a>
</div>
</li>
<li class="navBtn ${ page == 'userPlaylist' ? 'active' : '' } "><a href="#">Playlist</a></li>
<li class="navBtn"><a href="#">Log Out</a></li>
</ul>
</nav>
<nav id="navbarV">
<ul class="navbar">
<li class="navBtn dropdown ${ page == 'adminPages' ? 'active' : '' } ">
<a class="dropbtn" href="#">Admin</a>
<div class="dropdown-content">
<a href="#">Add Track</a>
<a href="#">Add Album</a>
<a href="#">Add Genre</a>
<a href="#">Add Performer</a>
</div>
</li>
<li class="navBtn dropdown ${ page == 'adminPages' ? 'active' : '' } ">
<a class="dropbtn" href="#">Admin</a>
<div class="dropdown-content">
<a href="#">Add Track</a>
<a href="#">Add Album</a>
<a href="#">Add Genre</a>
<a href="#">Add Performer</a>
</div>
</li>
</ul>
</nav>
</div>
</header>这就是它目前所做的： 如您所见，垂直菜单（我更改了颜色，以便您可以清楚地做出改变）正在水平菜单上方，这根本不好。我也希望它尽可能地响应。 我真的希望有人能帮助我并解释它为什么起作用。 感谢您的帮助！
【问题讨论】：
标签： html css navigation nav