html - 下拉按钮斗争

Question

当有人悬停按钮时，我正在尝试从我的导航栏中创建一个下拉菜单。这是我写的：

.navigation-bar {
    display: flex;
    position: relative;
    padding: 15px;
    border: 1px solid blue;   }

.navbutton {
    justify-content: flex-end; }

.navigation-bar ul {
    list-style-type: none;
    display: flex; }

.navigation-bar a {
    color: black;
    text-decoration: none;
    padding: 8px;
    padding-right: 10px; }

#logo {
    padding-left: 50px; }

.arrow {
    width: 8px;
    height: 8px;
     }

.navigation-bar button {
    justify-content: flex-end; }

.wrapper-button {
    position: absolute;
    right: 60px;
    top: 30%; }

#navbutton {
    background: white;
    border: 1px solid #3A79F6;
    color: #3A79F6;
    border-radius: 25px;
    font-size: 15px;
    padding: 10px;
    padding-right: 25px;
    padding-left: 25px; } 

#navbutton:hover {
    background-color: #3A79F6;
    transition-delay: 0.4s;
    color: white;
    cursor: pointer; }

.dropdown ul {
    display: inline; }

.test a{
    display: none;
    border: 1px solid blue; }


.test a:hover {
    display: inline;
    border: 1px solid black; }

    <div class="navigation-bar">
        <img src="images/image 18.png" id="logo" alt="seotag">
        <ul>
            <li><a href="#">functionality</a></li>
            <li><a href="#">Explorer</a></li>
            <div class="dropdown">
            <li><a href="#"> Souscriptions <img class="arrow" src="images/down.png" alt=""></a>
                <ul>
                    <li class="test"><a href="#">Test Dropdown 1</a></li>
                    <li class="test"><a href="#">Test Dropdown 2</a></li>
                </ul>
            </div>
            </li>
            <li><a href="#">Templates</a></li>
            <li ><a href="#">Wix partners</a><img class="arrow" src="images/down.png" alt=""></li>
                
            <li><a href="#">Help</a></li>
            <li><a href="#">Languages</a><img class="arrow" src="images/down.png" alt=""></li>
                
        </ul>
        <div class="wrapper-button">
        <button id="navbutton">Se Connecter</button>

我正在尝试显示下拉列表的内联元素，然后不显示任何内容，并且仅当有人悬停按钮以显示元素但由于某种原因它不起作用时才显示。

标签： htmlcss

Answer 1

下拉菜单总是很难设置样式，我做了一个小例子，这样你就可以看到在悬停另一个元素时可以做什么来使一个元素可见。

/* Dropdown related styling */

.dropdown {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
}

.has-dropdown {
  position: relative;
}

.has-dropdown:hover .dropdown {
  display: inline-block;
}

.dropdown a {
  border: 1px solid blue;
  width: 100%;
  text-wrap: nowrap;
  background: #FFF;
  display: block;
  white-space: nowrap;
}

.dropdown a:hover {
  border: 1px solid black;
}


/* Other styling */

.navigation-bar {
  display: flex;
  position: relative;
  padding: 15px;
  border: 1px solid blue;
}

.navbutton {
  justify-content: flex-end;
}

.navigation-bar ul {
  list-style-type: none;
  display: flex;
}

.dropdown ul {
  display: inline;
}

.navigation-bar a {
  color: black;
  text-decoration: none;
  padding: 8px;
  padding-right: 10px;
}

logo {
  padding-left: 50px;
}

.arrow {
  width: 8px;
  height: 8px;
}

.navigation-bar button {
  justify-content: flex-end;
}

.wrapper-button {
  position: absolute;
  right: 60px;
  top: 30%;
}

navbutton {
  background: white;
  border: 1px solid #3A79F6;
  color: #3A79F6;
  border-radius: 25px;
  font-size: 15px;
  padding: 10px;
  padding-right: 25px;
  padding-left: 25px;
}

navbutton:hover {
  background-color: #3A79F6;
  transition-delay: 0.4s;
  color: white;
  cursor: pointer;
}

<div class="navigation-bar">
  <img src="images/image 18.png" id="logo" alt="seotag">
  <ul>
    <li><a href="#">functionality</a></li>
    <li><a href="#">Explorer</a></li>
    <li class="has-dropdown"><a href="#"> Souscriptions <img class="arrow" src="images/down.png" alt=""></a>
      <div class="dropdown">
        <ul>
          <li class="test"><a href="#">Test Dropdown 1</a></li>
          <li class="test"><a href="#">Test Dropdown 2</a></li>
        </ul>
      </div>
    </li>
    <li><a href="#">Templates</a></li>
    <li><a href="#">Wix partners</a><img class="arrow" src="images/down.png" alt=""></li>

    <li><a href="#">Help</a></li>
    <li><a href="#">Languages</a><img class="arrow" src="images/down.png" alt=""></li>

  </ul>
  <div class="wrapper-button">
    <button id="navbutton">Se Connecter</button>
  </div>
</div>