css 悬停子菜单未保持打开状态

w8f9ii69 于 2023-07-01 发布在其他

关注(0)|答案(4)|浏览(107)

我做了全宽下拉子菜单。问题是当我试图将鼠标从主列表移动到子菜单时，子菜单消失了。此外，不应用子菜单上的过渡。我写的代码在下面。请检查并纠正它。

body {
  margin: 0;
  padding: 0;
}

ul,
li,
a {
  list-style: none;
  text-decoration: none;
}

.wrap {
  position: relative;
  width: 100%;
  height: 100px;
}

.list {
  margin: 0;
  padding: 0;
  width: 100%;
  left: 0;
  top: 100px;
  height: 100px;
  text-align: center;
}

.list li {
  display: inline-block;
  margin: 20px;
}

.list>li:hover ul {
  display: list-item;
  opacity: 1;
}

.list>li:hover>a {
  color: red;
}

.sub_list {
  margin: 0;
  padding: 0;
  position: absolute;
  display: none;
  width: 100%;
  height: 100px;
  left: 0;
  top: 50px;
  text-align: center;
  opacity: 0;
  transition: all 0.5s;
}

.sub_list li {
  display: inline-block;
  margin: 20px;
}

.sub_list li a:hover {
  color: red;
}

<div class="wrap">
  <ul class="list">
    <li><a href="#">list-1</a>
      <ul class="sub_list">
        <li><a href="#">sublist-a</a></li>
        <li><a href="#">sublist-b</a></li>
        <li><a href="#">sublist-c</a></li>
      </ul>
    </li>
    <li><a href="#">list-2</a></li>
    <li><a href="#">list-3</a></li>
    <li><a href="#">list-4</a></li>
    <li><a href="#">list-5</a></li>
  </ul>
</div>

我想使子菜单保持可见时，鼠标在整个区域的子菜单div（100%的屏幕宽度）。
请帮忙谢谢

css

来源：https://stackoverflow.com/questions/55863030/hover-submenu-doesnt-stay-opened

4条答案

按热度按时间

ttp71kqs1#

除了在其他答案中提到的关于margin/padding/positioning的问题之外，转换将不起作用，因为您不能从display: none;转换到另一个状态，反之亦然。相反，只依赖于opacity并添加pointer-events属性，以便子菜单本身在隐藏时不会触发悬停或覆盖任何其他内容。
下面是完整的工作代码：

body {
  margin: 0;
  padding: 0;
}

ul, li, a {
  list-style: none;
  text-decoration: none;
}

.wrap {
  position: relative;
  width: 100%;
  height: 100px;
}

.list {
  margin: 0;
  padding: 0;
  width: 100%;
  left: 0;
  top: 100px;
  height: 100px;
  text-align: center;
}

.list li {
  display: inline-block;
  padding: 20px;
}

.list > li:hover ul {
  pointer-events: all;
  opacity: 1;
}

.list > li:hover > a {
  color: red;
}

.sub_list {
  margin: 0;
  padding: 0;
  position: absolute;
  width: 100%;
  height: 100px;
  left: 0;
  top: 50px;
  text-align: center;
  opacity: 0;
  transition: all 0.5s;
  pointer-events: none;
}

.sub_list li {
  display: inline-block;
  margin: 20px;
}

.sub_list li a:hover {
  color: red;
}

<div class="wrap">
  <ul class="list">
    <li><a href="#">list-1</a>
      <ul class="sub_list">
        <li><a href="#">sublist-a</a></li>
        <li><a href="#">sublist-b</a></li>
        <li><a href="#">sublist-c</a></li>
      </ul>
    </li>
    <li><a href="#">list-2</a>
      <ul class="sub_list">
        <li><a href="#">sublist-a</a></li>
        <li><a href="#">sublist-b</a></li>
        <li><a href="#">sublist-c</a></li>
      </ul>
    </li>
    <li><a href="#">list-3</a>
      <ul class="sub_list">
        <li><a href="#">sublist-a</a></li>
        <li><a href="#">sublist-b</a></li>
        <li><a href="#">sublist-c</a></li>
      </ul>
    </li>
    <li><a href="#">list-4</a>
      <ul class="sub_list">
        <li><a href="#">sublist-a</a></li>
        <li><a href="#">sublist-b</a></li>
        <li><a href="#">sublist-c</a></li>
      </ul>
    </li>
    <li><a href="#">list-5</a>
      <ul class="sub_list">
        <li><a href="#">sublist-a</a></li>
        <li><a href="#">sublist-b</a></li>
        <li><a href="#">sublist-c</a></li>
      </ul>
    </li>
  </ul>
</div>

赞(0）回复(0）举报 2023-07-01

k4emjkb12#

我帮你解决了这个问题：https://codepen.io/anon/pen/rboPLE这是我改变的：

.list li {
        display: inline-block;
        padding: 20px; // this line was margin: 20px; before
    }

当试图到达子菜单时，您离开了.list li项，因为它有一个边距。使用Padding，空间属于元素，当您将鼠标移动到子菜单时，它仍然悬停。
我在上面的链接中为示例着色，以便您可以看到元素的边界。

赞(0）回复(0）举报 2023-07-01

d4so4syb3#

你的代码是完美的，但有一些小问题。
使用CSS代码：

.sub_list {
  opacity: 0;
  transition-duration: 200ms;
  transition-timing-function: ease-in;
  transition-property: opacity, margin-top, visibility;
  visibility: hidden;
  margin: 50px 0 0;
  padding: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 50px;
  text-align: center;
}

.list > li:hover ul {
    margin-top:0;
    opacity: 1;
    visibility: visible;
}

使用此代码其工作完美的过渡效果和下拉子菜单的问题得到解决.

赞(0）回复(0）举报 2023-07-01

nzk0hqpo4#

简单地使用opacity: 0; visibility: hidden;，当鼠标悬停在li标签上时，将其更改为opacity: 1; visibility: visible; pointer-events: all;

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

header {
  height: 80px;
  width: 100%;
  background-color: #ffffff;
}

header nav ul {
  display: flex;
  flex-direction: row;
  list-style-type: none;
}
header nav ul li a {
  text-decoration: none;
  color: #1f2024;
  font-weight: 600;
  font-size: 14px;
  padding: 0 10px;
}
header nav ul li a i {
  margin-left: 9px;
}
header nav ul li ul.dropdown {
  background-color: #000000;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 20px;
  z-index: 999;
}
header nav ul li ul.dropdown li {
  padding: 5px 30px 0px 2px;
}
header nav ul li ul.dropdown li a {
  height: 36px;
  color: #ffffff;
}
header nav ul li:hover ul.dropdown {
  display: block;
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Header</title>
    <link rel="stylesheet" href="./public/css/header.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
        integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Blog</a></li>
                <li>
                    <a href="#">Menu 1<i class="fa-solid fa-chevron-down"></i></a>
                    <ul class="dropdown">
                        <li><a href="#">Sub Menu 1</a></li>
                        <li><a href="#">Sub Menu 2</a></li>
                        <li><a href="#">Sub Menu 3</a></li>
                    </ul>
                </li>
                <li><a href="#">Menu 2</a></li>
                <li>
                    <a href="#">Menu 3<i class="fa-solid fa-chevron-down"></i></a>
                    
                    <ul class="dropdown">
                        <li><a href="#">Sub Menu 1</a></li>
                        <li><a href="#">Sub Menu 2</a></li>
                        <li><a href="#">Sub Menu 3</a></li>
                    </ul>
                </li>
            </ul>
        </nav>
    </header>
</body>
</html>

赞(0）回复(0）举报 2023-07-01

我来回答

css 悬停子菜单未保持打开状态

4条答案

相关问题

热门标签

最新问答