Question

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

还有没有一种方法可以在内容的点击中添加一些动画，使其看起来不那么“粗糙”？

动画不是优先级，但要使导航下拉菜单的内容显示在屏幕上。

function(&$resource)

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

Answer 1

还有没有一种方法可以在内容的点击中添加一些动画，使其看起来不那么“粗糙”？

1）添加到.dropdown-content代码中：

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

2）添加到.dropdown:hover .dropdown-content代码中：

transform: scaleY(1);

以某种方式将其显示在页面外部

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>

Answer 2

在您的.dropdown-content类中添加一个right: 0;

.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;
}


.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color:black;
  right: 0;
  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;
}

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

导航下拉菜单内容无法在屏幕上正确显示

2 个答案: