大家好我有这样的菜单：
正如你所看到的，我在子菜单中有一个子菜单，现在当我将鼠标悬停在“In Person”上时，我的子菜单会出现，但当我尝试进入子菜单时消失，我该如何解决？这是我的CSS：
li.menu-in-person ul.dropdown-menu {
display: none !important;
}
li.menu-in-person:hover ul.dropdown-menu,
li.menu-in-person ul.dropdown-menu:hover {
display: block !important;
}
.navbar .navbar-nav li:last-child .dropdown-menu {
right: -174px;
left: auto;
top: 0px;
}<li class="dropdown menu-services"><a class="dropdown-toggle" href="#">Services <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="menu-online"><a href="http://example.com/online-health-coaching/">Online</a></li>
<li class="dropdown menu-in-person"><a href="#">In Person</a>
<ul class="dropdown-menu">
<li class="menu-classes"><a href="http://example.com/classes/">Classes</a></li>
<li class="menu-corporate-wellness"><a href="http://example.com/corporate-wellness/">Corporate Wellness</a></li>
</ul>
</li>
</ul>
</li>当您将鼠标从人工缓慢移动到子菜单时，可以在您的实时网站http://annapiotrowski.com/上重现该问题。由于padding: 5px 5px 5px 5px上的dropdown-menu CSS，子菜单消失了。关注我的CSS更新，我希望它能帮到你。谢谢
在padding: 5px 5px 5px 5px !important的第1205行将padding: 0 !important更改为style.css
.navbar .navbar-nav .dropdown-menu {
background-color: rgba(0,0,0,0.7) !important;
padding: 0 !important;
}
在right: -174px;的第35行将right: -160px;更改为style.css
.navbar .navbar-nav li:last-child .dropdown-menu {
right: -160px;
left: auto;
top: 0px;
}
在padding:8px 20px;的第223行将padding:12px 20px;更改为responsive.css
.navbar .navbar-nav .dropdown-menu li a {
font-size:13px;
text-align:left;
padding: 12px 20px;
color:#c8c8c8;
}
这是你想要实现的目标吗？
ul.sub-menu, ul.sub-dropdown {
display: none !important;
}
li.menu-services:hover ul.sub-menu,
li.menu-services:focus ul.sub-menu {
display: block !important;
}
li.menu-in-person:hover ul.sub-dropdown,
li.menu-in-person:focus ul.sub-dropdown {
display: block !important;
}
.navbar .navbar-nav li:last-child .dropdown-menu {
right: -174px;
left: auto;
top: 0px;
} <li class="dropdown menu-services"><a class="dropdown-toggle" href="#">Services <b class="caret"></b></a>
<ul class="dropdown-menu sub-menu">
<li class="menu-online"><a href="http://example.com/online-health-coaching/">Online</a></li>
<li class="dropdown menu-in-person"><a href="#">In Person</a>
<ul class="dropdown-menu sub-dropdown">
<li class="menu-classes"><a href="http://example.com/classes/">Classes</a></li>
<li class="menu-corporate-wellness"><a href="http://example.com/corporate-wellness/">Corporate Wellness</a></li>
</ul>
</li>
</ul>
</li>我不知道你究竟是什么意思，但这是我网站上的一个片段。这是你在找什么？
<style type="text/css">
body {
background: url(https://res.cloudinary.com/calvinhaworth/image/upload/v1552847132/darkgreybackgroundwebsite.jpg);
height: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
div.cntr {
text-align: center;
}
.logo:hover {
-webkit-filter: blur(2px); /* Safari 6.0 - 9.0 */
filter: blur(2px);
}
div.cntr {
text-align: center;
}
.linkright {
font-family: "IBM Plex Serif", serif;
background-color: black;
color: Aqua;
border: ridge 10px black;
margin-top: 25;
}
.linkright:hover {
font-family: "IBM Plex Serif", serif;
color: black;
background-color: white;
border: 10px ridge purple;
margin-top: 25;
}
.linkinside {
color: blue;
}
.linkinside:hover {
color: black;
}
.wrapper {
font-family: "IBM Plex Serif", serif;
border: 5px ridge black;
border-radius: 25px;
padding: 20px;
margin-left: 100px;
margin-right: 100px;
background-color: rgb(234, 234, 234);
}
.dropbtn {
font-family: "IBM Plex Serif", serif;
margin-top: 15px;
background-color: black;
color: Aqua;
font-size:16px;
border: 10px ridge black;
border-radius: 10px;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: black;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
border: 10px ridge black;
border-radius: 10px;
}
.dropdown-content a {
color: aqua;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
color: black;
background-color: white
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: white;
}
.about {
font-family: 'IBM Plex Sans Condensed', sans-serif;
}
.stick {
position: -webkit-sticky;
position: sticky;
top: 0;
}
</style>
<div class="dropdown">
<div class="dropdown">
<button class="dropbtn"><u>Extra Links (Mouse Over)</u></button>
<div class="dropdown-content">
<a rel="noopener noreferrer" target="_blank" href="http://calvinhaworth.x10host.com/english19thdesktop/"><u>English I</u></a>
<a rel="noopener noreferrer" target="_blank" href="http://calvinhaworth.x10host.com/inmath19thdesktop/"><u>Integrated Math I</u></a>
<a rel="noopener noreferrer" target="_blank" href="http://calvinhaworth.x10host.com/geo9thgradedesktop/"><u>Geography</u></a>
<a rel="noopener noreferrer" target="_blank" href="http://calvinhaworth.x10host.com/teamlife9thdesktop/"><u>Team/Life Activities</u></a>
</div>
</div> 请问为什么你把显示器都没有？
{display：none！important; }
我只是假设顺便说一下。我猜想代码应该是这样的
{display：block！important; }