时间戳

首页 > 解决方案 > 将鼠标悬停在第二个下拉子菜单上时不会显示

html - 将鼠标悬停在第二个下拉子菜单上时不会显示

问题描述

我有一个使用引导程序的导航菜单，当我将第二个子菜单放在第一个子菜单的一侧时，菜单运行良好。我已将其更改为将第三级子菜单放在下拉列表的链接下。现在，当将鼠标悬停在它上面时，第三级菜单将不会显示。

我尝试了不同的类组合并添加了 id，但似乎无法让它在悬停时显示出来。我目前没有为此使用 JavaScript，因为它适用于 html 和 css。

这是正在发生的事情的一个小模型。

html {
	padding: 0;
    margin: 0;
    min-height: 100%;
}

body {
	padding: 0;
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
    border-top: 7px solid black;
    font-size: 62%;
    font-family: "Open Sans";
}

* {
	font-family: 'Open Sans';
}

.container {
    padding-right: 0;
}

main {
	padding-bottom: 22em;
}

p {
	font-size: 
}

.extra-bold {
	font-weight: 800;
}

.semi-bold {
	font-weight: 600;
}

.bold {
	font-weight: bold;
}

.navbar {
    background-image: linear-gradient(rgba(235,235,235,0), rgba(235,235,235,1));
    height: 129px;
}

.navbar-brand {
	margin-left: 1em;
    margin-top: .5em;
}

.nav {
    min-width: 100%; 
    flex-direction: row;
    letter-spacing: 1px;
    margin-left: 10em;
}

.navbar-nav {
    flex-direction: row;
}

.nav li {
    margin: 0em 1em;
}

.nav-link {
    color: black;
}

.dropdown-menu a:hover {
	color: white;
    background-color: rgb(217,0,0);
}

.dropdown-item:hover {
	color: white;
    background-color: rgb(217,0,0);
}

.nav-item {
	font-size: 1.6em;
}

.nav > li.disabled > a:hover {
	text-decoration: underline;
    color: rgb(217,0,0);
}

.nav-link:hover {
	text-decoration: underline;
    color: rgb(217,0,0);
}

.dropdown-hover {
	color: white;
    background-color: rgb(217,0,0);
}

.dropdown-item:hover {
	background-color: rgb(217,0,0);
    color: white;
}

.dropdown-menu.disabled:hover {
	color: white;
    background-color: rgb(217,0,0);
}

a.dropdown-item.dropdown.disabled:hover {
	color: white;
    background-color: rgb(217,0,0);
}

.dropdown-menu li:hover {
	background-color: rgb(217,0,0);
    color: white;
}

.dropdown ul li:hover > a {
    background-color: rgb(217,0,0);
    color: white;
}

.dropdown-menu .sub-menu {
  position: relative;
  top: 0;
  display: none;
  margin-top: -1px;
  background-color: #fff;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: .25rem;
  list-style-type: none;
  padding-left: 0;
}

#toggle:hover .sub-menu {
  display: block;
}

.fa-caret-right {
  float: right;
  line-height: 1.5;
}

.fa-caret-right {
	line-height: 1.75;
    margin-left: .5em
}

.container {
    margin-left: auto;
    margin-right: auto;
}

ul.nav li.dropdown:hover div.dropdown-menu {
    display: block;
}

* {
    position: relative;
}

#navbarDropdown {
	color: black;
}

.dropdown-item.disabled, .dropdown-item:disabled {
	color: black;
}

.dropdown-item.disabled:hover, .dropdown-item:disabled:hover {
	color: white;
    background-color: rgb(217,0,0);
}

.nav-link.disabled:hover {
	color: white;
    background-color: rgb(217,0,0);
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0 shrink-to-fit=no">
<link rel="canonical" href="http://hmi.blueseaonline.net/index.php" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.11.1/css/light.css" integrity="sha384-Rg8mXhpzJH99uBsgdsCp9zXjkcsw/pm+s4Kgu/56eRQSd8SAszYc6hssH5MLusHl" crossorigin="anonymous">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.11.1/css/fontawesome.css" integrity="sha384-O68Og25nY+MZZRUiP6gm7XPDuHsNC5DgKWEoxn6+3CFcGLRXuFihbGO/8c5Ned0i" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans" />
<link rel="stylesheet" href="http://hmi.blueseaonline.net/index.php/site/style">

</head>
<body>
  <header>
        <nav class="navbar navbar-expand-md navbar-right">
      <div class="container">
        <div class="row" style="min-width: 100%;">
        <div class="col-xs-12">
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="nav justify-content-center" style="list-style-type: none;">
              <li class="nav-item dropdown">
                <a href="/hmi-lumber-sales/" class="nav-link disabled"id="navbarDropdown" role="button" aria-haspopup="true" aria-expanded="false">Test <i class="fa fa-caret-down"></i></a>
                <div class="dropdown-menu toggle-menu" aria-labelledby="navbarDropdown">
                  <ul style="padding:0; list-style-type: none;">
                  <li>
                    <a class="dropdown-item dropdown disabled" id="toggle" href="">Test <i class="fa fa-caret-right"></i></a>
                    <ul class="dropdown-menu sub-menu">
                      <li><a class="dropdown-item" href="">Test</a></li>
                    
                      <li><a class="dropdown-item" href="">Test</a></li>
                    
                      <li><a class="dropdown-item" href="">Test</a></li>
                    
                      <li><a class="dropdown-item" href="">Test</a></li>
                  </ul>
              </li>   
              <li>
                <a class="dropdown-item"  href="#">Test</a>
                
              </li>   
              <li>
                <a class="dropdown-item dropdown"  href="">Test <i class="fa fa-caret-right"></i></a>
                  <ul class="dropdown-menu sub-menu">
                      <li><a class="dropdown-item" href="">Test</a></li>
                      <li><a class="dropdown-item" href="">Test</a></li>
                  </ul>
              </li>   
              <li>
                <a class="dropdown-item"  href="">Test</a>
              </li>   
              <li>
                <a class="dropdown-item"  href="">Test</a>
              </li>   
            </ul>
          </div> 
        </li>   
        <li class="nav-item">
          <a href="" class="nav-link">Test</a>
         </li>
         
        
          
                
          <li class="nav-item dropdown">
            <a href="" class="nav-link disabled"id="navbarDropdown" role="button" aria-haspopup="true" aria-expanded="false">Test <i class="fa fa-caret-down"></i></a>
            <a href="#" class="nav-link" id="navbarDropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="caret"></span><span class="sr-only">Dropdown Menu Toggle</span></a>
            
            <div class="dropdown-menu toggle-menu" aria-labelledby="navbarDropdown">
              <ul style="padding:0; list-style-type: none;">
              
              <li>
                <a class="dropdown-item"  href=""Test</a>
                
              </li>   
              
              <li>
                <a class="dropdown-item dropdown"  href="">Test <i class="fa fa-caret-right"></i></a>
                
                  <ul class="dropdown-menu sub-menu">
                    
                      <li><a class="dropdown-item" href="">Test</a></li>
                    
                      <li><a class="dropdown-item" href="">Test</a></li>
                    
                      <li><a class="dropdown-item" href="">Test</a></li>
                    
                  </ul>
                
              </li>   
              
              <li>
                <a class="dropdown-item"  href="">Test</a>
                
              </li>   
              
              <li>
                <a class="dropdown-item"  href="">Test</a>
                
              </li>   
              
              <li>
                <a class="dropdown-item"  href="">Test</a>
                
              </li>   
              
              <li>
                <a class="dropdown-item"  href="">Test</a>
                
              </li>   
              
              <li>
                <a class="dropdown-item"  href="">Test</a>
                
              </li>   
              
              </ul>
            </div>
            
         </li>
         
        
          
                
          <li class="nav-item">
            <a href="" class="nav-link">Test</a>
            
            
         </li>
         
            </ul>
          </div>
         
        
      </div>
    </div>
  </div>
</nav>
    <div class="clearBoth"></div>

  <!-- Load jQuery, then Popper, then Bootstrap -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  <!-- Load Map Resizer -->
  
  <!-- Load lightbox -->
  
</body>
</html>

这就是我想要得到的：下拉设计

标签： htmlcsstwitter-bootstrapnavbar

解决方案

推荐阅读