Question

我正在尝试为我的导航栏创建下拉登录，注册和联系表单，但我不知道该怎么做，因为我对这一切都是新手而且我是＆＃39;这里有点黑暗。有人可以帮我这么做吗？我真的很感激。这是我的导航栏：

如您所见，这些是下拉按钮，但它们没有内容。

HTML：

<div class="container">

    <img src="img1.png" style="max-width: 80px; margin-top: 0px;" alt="logo" class="logo">
    <nav>
      <ul class="menu">
          <li>INICIO</li>
          <li class="with-arrow">CONTACTO</li>
          <li class="with-arrow">REGISTRATE</li>
          <li class="with-arrow">INGRESAR</li>
    </nav> 

</header>


</div>

CSS：

   .menu {
   display: flex;
   list-style: none;
   background-color: #151515;
   }
  .menu li.with-arrow {
  padding: 35px 15px;
  cursor: pointer;
   padding-bottom: 20px;
  position: relative;
  margin: 5px;
   color: lightgray;
   font-weight: bold;
  font-family: sans-serif;
  }
  .menu li.with-arrow:after {
   font-family: FontAwesome;
   font-size: 20px;
  font-weight: bold;
   content: '\f107';
   display: inline-block;
  color: yellow;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0);
  transition: transform 0.3s ease;
  }
  .menu li.with-arrow:hover {
  background-color: rgba(0, 0, 0, 0.25);
   }
  .menu li.with-arrow:hover:after {
   transform: translate(-50%, 5px);
  }

 .menu li {
 padding: 35px 15px;
 cursor: pointer;
  padding-bottom: 20px;
 position: relative;
 margin: 5px;
 color: lightgray;
 font-weight: bold;
 font-family: sans-serif;
 }
.menu li:hover {
 background-color: rgba(0, 0, 0, 0.25);
 color: white;
  }

我的CSS代码用于箭头的动画。

Answer 1

很抱歉，如果我无法提供一个可靠的答案，我记得这样做了一会儿，当我谷歌搜索它时，我发现了许多好的指南，一步一步的指南，你可以使用的代码。你可能会尝试过，但是我觉得有一些很好的指南，希望可能有助于升技，直到有人在这里出现一个真实的答案，记住/知道如何做到这一点。：）

也许试试这个：

<style>
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
}

.dropdown:hover .dropdown-content {
    display: block;
}
</style>

<div class="dropdown">
  <span>Mouse over me</span>
  <div class="dropdown-content">
    <p>Hello World!</p>
  </div>
</div>

Answer 2

需要安装Bootstrap，并为下拉列表的按钮创建.onclick事件。它应该看起来像我接下来要发布的内容。

Answer 3

`<div class="container">

<img src="img1.png" style="max-width: 80px; margin-top: 0px;" alt="logo" 
class="logo">
<div class="dropdown">
  <ul class="menu">
<button onclick="OnClick()">Button for Drop Down</button>
      <a href="#">INICIO</a>
      <a href="#" class="with-arrow">CONTACTO</a>
      <a href ="#" class="with-arrow">REGISTRATE</a>
      <a href ="#" class="with-arrow">INGRESAR</a>
</ul>
</div>
</header>

<!-- additionally, the OnClick() function needs to be controlled by 
javascript, by declaring a function called OnClick I added links instead of 
 list elements because that is how I do drop down menus. -->`

如何创建下拉登录，注册和联系表单

3 个答案: