html – 下拉菜单 – 子菜单菜单在悬停时消失

概述一切都很好,除了子菜单,当盘旋时…它在悬停时消失.我确信悬停时会出现一些问题.即 .dropdown-content a:hover + .dropdown-submenu { display: block;} .icon-cadet-left { float: right;}.dropbtn { overflow: hidden; width: 300px; back 一切都很好,除了子菜单,当盘旋时…它在悬停时消失.我确信悬停时会出现一些问题.即

.dropdown-content a:hover + .dropdown-submenu {   display: block;}

.icon-cadet-left {  float: right;}.dropbtn {  overflow: hIDden;  wIDth: 300px;  background-color: #338d99;  color: white;  padding: 16px;  Font-family: 'Play';  Font-size: 20px;  border: none;  cursor: pointer;  text-transform: uppercase;  letter-spacing: 2px;}.dropdown {  position: relative;  display: block;}.dropdown-content {  display: none;    position: absolute;  background-color: #e0e0e0;  Box-shadow: 0px 8px 16px 0px rgba(0,0.2);  margin:0px; }.dropdown-content a {  wIDth: 300px;  color: black;  Font-family: 'Play';  letter-spacing: 2px;  padding: 12px 16px;  text-decoration: none !important;  display: block;  text-align: center;  border-bottom: 0.1em solID #333;  border-radius: 5%;  text-transform: uppercase;  }.dropdown-submenu {  display: none;  margin:0px;  background-color: #e0e0e0;  position: absolute;  Box-shadow: 0px 8px 16px 0px rgba(0,0.2);  left: 100%;  top: 0px; }.dropdown-submenu a {  wIDth: 300px;  color: black;  Font-family: 'Play';  letter-spacing: 2px;  padding: 12px 16px;  text-decoration: none !important;  display: block;  text-align: center;  border-bottom: 0.1em solID #333;  border-radius: 5%;  text-transform: uppercase;}.dropdown-content a:hover {  background-color: #f1f1f1;  color:#909090;}.dropdown-submenu a:hover {  background-color: #f1f1f1}.dropdown:hover .dropdown-content {  display: block;} .dropdown-content a:hover + .dropdown-submenu {  display: block;}.dropdown:hover .dropbtn {  background-color: #29727c;}

<div >          <div >            <button >logo Design</button>                <div >                  <a href="#">logo & IDentity<i ></i></a>                      <div >                        <a href="#">logo Design</a>                        <a href="#">Business Cards</a>                        <a href="#">Sationary</a>                        <a href="#">HolIDay Doodles</a>                      </div>                  <a href="#">Business & Advertising<i ></i></a>                      <div >                        <a>Sample 01</a>                        <a>Sample 02</a>                        <a>Sample 03</a>                        <a>Sample 04</a>                      </div>                  <a href="#">Website & Digitals<i ></i></a>                      <div >                        <a>Option 01</a>                        <a>Option 02</a>                        <a>Option 03</a>                        <a>Option 04</a>                      </div>                  <a href="#">Textile Designing<i ></i></a>                      <div >                        <a>Sample 01</a>                        <a>Sample 02</a>                        <a>Sample 03</a>                        <a>Sample 04</a>                      </div>                </div>          </div>        </div>

解决方法 你只是忘了添加.dropdown-submenu：悬停到你的显示：block;规则.没有,子菜单会因为您不再悬停在标签上而消失.

.icon-cadet-left {  float: right;}.dropbtn {  overflow: hIDden;  wIDth: 300px;  background-color: #338d99;  color: white;  padding: 16px;  Font-family: 'Play';  Font-size: 20px;  border: none;  cursor: pointer;  text-transform: uppercase;  letter-spacing: 2px;}.dropdown {  position: relative;  display: block;}.dropdown-content {  display: none;  position: absolute;  background-color: #e0e0e0;  Box-shadow: 0px 8px 16px 0px rgba(0,0.2);  margin: 0px;}.dropdown-content a {  wIDth: 300px;  color: black;  Font-family: 'Play';  letter-spacing: 2px;  padding: 12px 16px;  text-decoration: none !important;  display: block;  text-align: center;  border-bottom: 0.1em solID #333;  border-radius: 5%;  text-transform: uppercase;}.dropdown-submenu {  display: none;  margin: 0px;  background-color: #e0e0e0;  position: absolute;  Box-shadow: 0px 8px 16px 0px rgba(0,0.2);  left: 100%;  top: 0px;}.dropdown-submenu a {  wIDth: 300px;  color: black;  Font-family: 'Play';  letter-spacing: 2px;  padding: 12px 16px;  text-decoration: none !important;  display: block;  text-align: center;  border-bottom: 0.1em solID #333;  border-radius: 5%;  text-transform: uppercase;}.dropdown-content a:hover {  background-color: #f1f1f1;  color: #909090;}.dropdown-submenu a:hover {  background-color: #f1f1f1}.dropdown:hover .dropdown-content {  display: block;}.dropdown-content a:hover + .dropdown-submenu,.dropdown-submenu:hover {  display: block;}.dropdown:hover .dropbtn {  background-color: #29727c;}

<div >  <div >    <button >logo Design</button>    <div >      <a href="#">logo & IDentity<i ></i></a>      <div >        <a href="#">logo Design</a>        <a href="#">Business Cards</a>        <a href="#">Sationary</a>        <a href="#">HolIDay Doodles</a>      </div>      <a href="#">Business & Advertising<i ></i></a>      <div >        <a>Sample 01</a>        <a>Sample 02</a>        <a>Sample 03</a>        <a>Sample 04</a>      </div>      <a href="#">Website & Digitals<i ></i></a>      <div >        <a>Option 01</a>        <a>Option 02</a>        <a>Option 03</a>        <a>Option 04</a>      </div>      <a href="#">Textile Designing<i ></i></a>      <div >        <a>Sample 01</a>        <a>Sample 02</a>        <a>Sample 03</a>        <a>Sample 04</a>      </div>    </div>  </div></div>

总结

以上是内存溢出为你收集整理的html – 下拉菜单 – 子菜单菜单在悬停时消失全部内容，希望文章能够帮你解决html – 下拉菜单 – 子菜单菜单在悬停时消失所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。