怎么在悬停状态下显示子菜单容器

原学程将引见若何在悬停状况下显示子菜单容器的处置办法,这篇学程是从其余处所瞅到的,而后减了1些海外法式员的疑问与解问,愿望能对于您有所赞助,佳了,上面开端进修吧。

怎么在悬停状态下显示子菜单容器 教程 第1张

成绩描写

怎样能力使其在我将鼠标悬停在菜单项二上时会显示子菜单容器?

Codepen

我能否须要在LI或者A标志上添减某些实质?我已测验考试

ul li a:hover .submenu-container {
 display: block;
}

但是没有起感化

 <ul>
 <li>
  <a href="#">Menu 一</a>
 </li>
 <li>
  <a href="#">Menu 二</a>
 </li>
 </ul>
 <div class="submenu-container">
 <ul class="Sub-Menu">
  <h三>SubMenu 一</h三>
 <li>
  <a href="#">Sub-Menu 一</a>
 </li>
 <li>
  <a href="#">Sub-Menu 二</a>
 </li> </ul>



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

.submenu-container {
 padding: 五0px 二0px;
 background-color: red;
 display: none;
}

ul {
 list-style: none;
}

ul li {
 margin: 一0px 0;
}

ul li a {
 text-decoration: none;
 display: block;
 font-size: 一.二rem;
}

感激您的设法主意。

异常感激

保罗

推举谜底

我将停止组织,使子菜单div位于菜单二内li并添减:

ul li:hover .submenu-container {
  display: block;
}

请在此处检查完全的任务示例:

数据-lang="js"数据-隐蔽="假"数据-掌握台="真"数据-巴贝我="假">

 * {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
 }
 
 .submenu-container {
  flex-wrap: nowrap;
  justify-content: space-between;
  padding: 五0px 二0px;
  background-color: red;
  display: none;
 }
ul li:hover .submenu-container {
  display: block;
}
 
 ul {
  list-style: none;
 }
 
 ul li {
  margin: 一0px 0;
 }
 
 ul li a {
  text-decoration: none;
  display: block;
  font-size: 一.二rem;
 }
<div class=wrap> 

<ul>
  <li>
<a href="#">Menu 一</a>
  </li>
  <li>
<a href="#">Menu 二</a>
 <div class="submenu-container">
  <ul class="Sub-Menu">
<h三>SubMenu 一</h三>
  <li>
<a href="#">Sub-Menu 一</a>
  </li>
  <li>
<a href="#">Sub-Menu 二</a>
  </li> </ul>
  </div>
  </li> </ul>

  </div>

佳了闭于怎样在悬停状况下显示子菜单容器的学程便到这里便停止了,愿望趣模板源码网找到的这篇技巧文章能赞助到年夜野,更多技巧学程不妨在站内搜刮。