HTML

Question

我正在做网站，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>

这就是它目前所做的：如您所见，垂直菜单（我更改了颜色，以便您可以清楚地看到不同之处）超过了水平菜单，这一点也不好。我也想让它尽可能地响应。我真的希望有人能帮助我并解释它为什么有效。感谢您的帮助！

Answer 1

要使垂直导航栏位于水平导航栏下方，您需要与顶部对齐属性。

    nav#navbarV {
      display: inline-block;
      float: none;
      background-color: #808000;
      font-size: 30;
      top: 70px; /* To align TOP position */
      left: 0;
      height: 100%;
      position: fixed;
      width: 15%;
    }

@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;
  top: 70px; /* To align TOP position */
  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>

Answer 2

您可以将顶部属性添加到垂直导航栏。我还清理了 HTML，因为您遗漏了一些结束标记。

  <div>
        <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</a></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>
  </div>
  <div>

            <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>

这是 CSS 和 top: 40px;

nav#navbarV{
    display:inline-block;
    float:left; 
    background-color: #808000;
    font-size: 30;
    left: 0;
  top:40px;
    height:100%;
    position:fixed;
    width:15%;
}

HTML - CSS |同时拥有一个固定的垂直菜单和一个固定的水平菜单

HTML - CSS | Have a fixed vertical menu AND a fixed horizontal menu at the same time

css

navigation

nav