时间戳

首页 > 解决方案 > 仅当我将鼠标悬停在搜索引擎上时，如何才能使下拉菜单出现？

html - 仅当我将鼠标悬停在搜索引擎上时，如何才能使下拉菜单出现？

问题描述

所以我正在创建我希望有用的网站的开始。我开始制作标题和菜单部分。在搜索引擎部分，当我将鼠标悬停在搜索引擎上时，我的意图是创建一个带有一些选项的下拉菜单，直到它消失。我在 CSS 代码显示中注释掉了：none，以便您可以看到下拉列表的样子。我尝试了伪类 .dropdown: hover 但它没有用。如何使下拉菜单仅在我将鼠标悬停在搜索引擎上时出现？链接图像作为它的外观示例，而不是它应该如何

HTML

<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='UTF-8'/>
    <title>SerFin</title>
    <link href="https://fonts.googleapis.com/css2?family=Cinzel&display=swap" rel="stylesheet">
    <style>
      .title {
        font-family: 'Cinzel', cursive;
      }
    </style>
    <link href='test.css' rel='stylesheet'/>
  </head>
  <body>
    <header>
      <nav>
        <ul class="menu">
          <li><a href='#'>Customer Service</a></li>
          <li><a href='#'>Submission</a></li>
          <li class="dropdown">Search Engine ▾&lt;li>
        </ul>
        <ul class="dropdown-menu">
          <li><a href="#">Universities</a></li>
          <li><a href="#">Jobs</a></li>
          <li><a href="#">Courses</a></li>
          <li><a href="#">Internships</a></li>
          <li><a href="#">Services</a></li>
        </ul>

        <ul class="setup">
          <li><a href='#'>Login</a></li>
          <li><a href="#">Sign up</a></li>
        </ul>
      </nav>
      <img class="logo" src="Logo.jpg"></img>
    </header>
  </body>
</html>

CSS

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

  body {
font-size: 18px;
line-height: 1.8em;
  }

  header {
background-color:#5D6063;
  }

  nav {
display: flex;
justify-content: space-around;
background-color: #54575A;
width: 100%;
height: 40px;
}

  li {
list-style: none;
display: inline;
padding-left: 10px;
padding-right: 10px;
  }

  a {
    color: #D3D3D3;
    text-decoration: none;
  }

  a:hover {
    text-decoration: underline;
    color: #54A5C4;
  }

  .menu {
    color: #EEEEEE;
    padding: 5px;
  }

  .setup {
    color: #EEEEEE;
    padding: 5px;
  }

  .title {
color: white;
display: flex;
justify-content: center;
padding: 150px;
  }

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding: 100px;
}
/*
---------------------------------------------------------------------------------------------
All of this is the heading, from now on everything has to do with the dropdown menu
*/
.dropdown {
  position: relative;
  z-index: 2;
}

 .dropdown-menu {
  display: flex;
  flex-direction: column;
  background: #54575A;
  border-radius: 1px;
  padding-top: 60px;
  position: absolute;
  top: -25px;
  left: 490px;
  z-index: 1;
}

.dropdown-menu li {
  list-style: none;
  border-bottom: 1px solid #FFF;
  padding: 0 40px 10px 20px;
  margin: 10px;
}

.dropdown-menu li:last-of-type {
  border-bottom: none;
}

.dropdown > span {
  z-index: 2;
  position: relative;
  cursor: pointer;
}

/*.dropdown-menu {
  display: none;
}*/

标签： htmlcss

解决方案

您可以在此使用纯 javascript 或 jquery。这是使用jquery的方法。 $('.dropdown').hover( function(){ $('.dropdown-menu').show(); });

推荐阅读