悬停子菜单不会保持打开状态 [英] Hover submenu doesn't stay opened

问题描述

我制作了全宽下拉子菜单.问题是当我尝试将鼠标从主列表移动到子菜单时，子菜单消失了.此外，不应用子菜单上的转换.我写的代码在下面.请检查并更正.

body {边距:0；填充:0；}呃，李，一种 {列表样式:无；文字装饰:无；}.裹 {位置:相对；宽度:100%；高度:100px；}.列表 {边距:0；填充:0；宽度:100%；左:0；顶部:100px；高度:100px；文本对齐:居中；}.list li {显示:内联块；边距:20px；}.list>li:hover ul {显示:列表项；不透明度:1；}.list>li:hover>a {红色;}.sub_list {边距:0；填充:0；位置:绝对；显示:无；宽度:100%；高度:100px；左:0；顶部:50px；文本对齐:居中；不透明度:0；过渡:全0.5s；}.sub_list li {显示:内联块；边距:20px；}.sub_list li a:悬停{红色;}

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

当鼠标位于子菜单 div 的整个区域(屏幕宽度为 100%)时，我想让子菜单保持可见.

请帮忙谢谢

解决方案

除了在其他答案中解决的有关边距/填充/定位的问题之外，过渡将不起作用，因为您无法从 display 过渡: none; 到另一个状态，反之亦然.相反，仅依赖 opacity 并添加 pointer-events 属性，以便子菜单在隐藏时不会本身触发悬停或覆盖任何其他内容.

这是完整的工作代码:

body {边距:0；填充:0；}ul, li, a {列表样式:无；文字装饰:无；}.裹 {位置:相对；宽度:100%；高度:100px；}.列表 {边距:0；填充:0；宽度:100%；左:0；顶部:100px；高度:100px；文本对齐:居中；}.list li {显示:内联块；填充:20px；}.list >li:悬停ul {指针事件:全部；不透明度:1；}.list >李:悬停>一种 {红色;}.sub_list {边距:0；填充:0；位置:绝对；宽度:100%；高度:100px；左:0；顶部:50px；文本对齐:居中；不透明度:0；过渡:全0.5s；指针事件:无；}.sub_list li {显示:内联块；边距:20px；}.sub_list li a:悬停{红色;}

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

I made full width dropdown submenu. the problem is that submenu disappears when I try to move mouse from mainlist to submenu. Also, transition on submenu is not applied. Code I wrote is at down below. Please check it and correct it.

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>

I'd like to make submenu stay visible when mouse is on whole area of submenu div(100% width of screen).

please help thank you

解决方案

In addition to the problem regarding margin/padding/positioning addressed in other answers, the transition wouldn't work because you can't transition from display: none; to another state or vice versa. Instead, solely rely on opacity and add the pointer-events property so that the submenu will not itself trigger the hover or overlay any other content when it's hidden.

Here's the fully working code:

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>

这篇关于悬停子菜单不会保持打开状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！