html - 导航下拉内容未在屏幕上正确显示

Question

我网站的响应式导航下拉内容不会显示在屏幕上，它以某种方式显示在页面之外...

有没有办法在点击内容时添加一点动画，让它看起来不会那么“粗糙”？

问题图片:http://prntscr.com/p5pre5

动画不是当务之急，但让导航下拉内容显示在屏幕上才是当务之急。

                <nav>
                  <div id="logo"><img src="images/logow.png"></div>
                  <label for="drop" class="toggle"><i class="fas fa-bars"></i></label>
                  <input type="checkbox" id="drop" />
                  <ul class="menu">
                    <li><a href="index.html">Home</a></li>
                    <li><a href="pricing.html">Pricing</a></li>
                    <li><a href="faq.html">Faq</a></li>

                    <li class="dropdown">
                      <a href="javascript:void(0)" class="dropbtn">Contact</a>
                      <div class="dropdown-content">
                        <a href="#">Support</a>
                        <a href="#">Order Website</a>
                      </div>
                    </li>

                  </ul>
                </nav>

.toggle, [id=drop] {
  display: none;
}
nav { 
margin:0;
padding: 0;
background-color: black;

}
#logo {
display: block;
  padding: 10px 0 0 30px;
  width: 10%;
float: left;
}
nav img{
  width: 200px;
}
nav:after {
  content: "";
  display: table;
  clear: both;
}
nav ul {
  float: right;
  list-style: none;
  padding: 0;
  margin: 0;
  line-height: 32px;
}
nav ul li {
  display: inline-block;
  float: left;
}
nav a {
  display: block;
  padding: 14px 20px;
  color: white;
  font-size: 17px;
  text-decoration: none;
}

nav a:hover {
color: #FF4E00;
}


li.dropdown {
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color:black;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
.dropdown-content a {
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: center;
}

.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
  display: block;
}

Answer 1

Is there also a way to add a little animation to the click of the content so it wont look so "rough"?

1) 添加到.dropdown-content代码:

transition: 0.2s;     
transform-origin: top;
transform: scaleY(0); 

2) 添加到.dropdown:hover .dropdown-content代码:

transform: scaleY(1);

its somehow displaying it outside of the page

1) 添加到.li.dropdown代码:

position: relative;

2) 添加到.dropdown-content代码

right: 0;

结果 https://codepen.io/hisbvdis/pen/BaBVGKe

.toggle,
[id=drop] {
  display: none;
}

nav {
  margin: 0;
  padding: 0;
  background-color: black;
}

#logo {
  display: block;
  padding: 10px 0 0 30px;
  width: 10%;
  float: left;
}

nav img {
  width: 200px;
}

nav:after {
  content: "";
  display: table;
  clear: both;
}

nav ul {
  float: right;
  list-style: none;
  padding: 0;
  margin: 0;
  line-height: 32px;
}

nav ul li {
  display: inline-block;
  float: left;
}

nav a {
  display: block;
  padding: 14px 20px;
  color: white;
  font-size: 17px;
  text-decoration: none;
}

nav a:hover {
  color: #FF4E00;
}

li.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  /* display: none; */
  position: absolute;
  right: 0;
  background-color: black;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  transition: 0.2s;
  transform-origin: top;
  transform: scaleY(0);
}

.dropdown-content a {
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: center;
}

.dropdown-content a:hover {
  background-color: #f1f1f1
}

.dropdown:hover .dropdown-content {
  /* display: block; */
  transform: scaleY(1);
}

<nav>
  <div id="logo"><img src="images/logow.png"></div>
  <label for="drop" class="toggle"><i class="fas fa-bars"></i></label>
  <input type="checkbox" id="drop" />
  <ul class="menu">
    <li><a href="index.html">Home</a></li>
    <li><a href="pricing.html">Pricing</a></li>
    <li><a href="faq.html">Faq</a></li>

    <li class="dropdown">
      <a href="javascript:void(0)" class="dropbtn">Contact</a>
      <div class="dropdown-content">
        <a href="#">Support</a>
        <a href="#">Order Website</a>
      </div>
    </li>

  </ul>
</nav>