Question

大家好，我的菜单如下：

如您所见，我在子菜单中有一个子菜单，现在当我将鼠标悬停在“亲自”上时，我的子菜单出现，但是当我尝试转到该子菜单时消失了，我该如何解决？这是我的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>

Answer 1

当您将鼠标从亲自缓慢移到那里的子菜单时，可以在您的实时网站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;
}

Answer 2

这是您要实现的目标吗？

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>

Answer 3

我不知道您的确切意思，但这是我网站上的摘录。这是您要找的东西吗？

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

Answer 4

我可以问一下为什么为什么不显示吗？

{显示：无！重要； }

我只是假设顺便说一句。代码应该像我想的那样

{显示：阻止！important; }

CSS Submeu出现在悬停中，但是当我尝试进入子菜单时消失

4 个答案: