时间戳

首页 > 解决方案 > 缺少子菜单

html - 缺少子菜单

问题描述

我正在尝试创建一个带有下拉菜单的菜单。我使用无序列表创建了它。我在代码中有第二个无序列表。我已经给出了两个列表不同的类名。问题是当我将代码放在一起时，下拉菜单不会显示。我从 CSS-tricks 网站复制了 CSS 代码，并尝试将其适应我的项目。我不确定我在 CSS 代码中放置类名的位置是否正确。

    .services {
      columns: 300px 3;
      list-style-position: inside;
      list-style-type: square;
    }

    .services_title {
      color: #000000;
    }

    .services_list {
      background-color: #E6D99C;
      color:#ED3936; 
      padding-left: 150px;
      padding-top: 20px;
      height: auto;
      padding-bottom: 20px;
    }

    .logo {
      text-align: center;
    }
    h1 {
      color:#ED3936;
      text-align: center;
    }

    ul.menu {
      background: #000000;
      list-style: none;
      margin: 0;
      padding-left: 325px;
    }

    li.menu_item {
      color: #fff;
      background: #000000;
      display: block;
      float: left;
      padding: 1rem;
      position: relative;
      transition-duration: 0.5s;
    }
  
    li.menu_item a {
      color: #fff;
      text-decoration:none;
    }

    li.menu_item:hover {
      background: red;
      cursor: pointer;    
    }
  
    ul.menu li.menu_item ul.sub_menu {
      background: #000000;
      visibility: hidden;
      opacity: 0;
      min-width: 5rem;
      position:absolute;
      transition: all 0.5s ease;
      margin-top: 1rem;
      left: 0;
      display: none;
      padding: 0;   
    }

    ul.menu li.menu_item:hover > ul.menu,
    ul.menu li.menu ul.menu:hover {
      visibility: visible;
      opacity: 1;
      display: block;
      padding: 0;
    }

    ul.sub.menu li.menu_item ul li.menu_item {
      clear: both;
      width: 100%;
      padding: 5px;
    }
<nav class="site-nav">
      <ul class="menu">
        <li class="menu_item"><a href="#">Veterinary Services</a>
            <ul class="sub_menu">
                <li class="menu_item"><a href="#">Internal Medicine</a></li>
                <li class="menu_item"><a href="#">Dental Care</a></li>
            </ul>
        </li>
        <li class="menu_item"><a href="#">Boarding</a></li>
        <li class="menu_item"><a href="#">Grooming</a></li>
        <li class="menu_item"><a href="#">Customer Portal</a></li>
        <li class="menu_item"><a href="#">About Us</a>
            <ul class="sub_menu">
                <li class="menu_item"><a href="#">Contact Us</a></li>
                <li class="menu_item"><a href="#">About Us</a></li>
                <li class="menu_item"><a href="#">Blog</a></li>
             </ul>
                                  </li>    
                              </ul>
                       </nav>
                   </head>
               <body>
 
        
            <div class="services_list">
               <h2 class="services_title">Services List</h2>
            
              <p class="services_title">All Pets Vet Hospital is designed to 
               serve four distinct yet overlapping pet care needs. Here is a
              list of all the services we offer.</p>
             <ul class="services">
                <li class="service_item">Allergy testing</li>
                <li class="service_item">Cancer treatment</li>
                <li class="service_item">Cardiology</li>
                <li class="service_item">Dermatology</li>
                <li class="service_item">Diagnostics</li>
                <li class="service_item">Electrocardiography</li>
                <li class="service_item">Emergency/Critical care</li>
                <li class="service_item">End of life care</li>
                <li class="service_item">Endocrinology</li>                 
                <li class="service_item">Endoscopy</li>
                <li class="service_item">Exotic pet care</li>
                <li class="service_item">Eye care</li>
                <li class="service_item">Flea and tick products</li>
                <li class="service_item">In-House laboratory</li>
                <li class="service_item">Intensive care unit</li>
                <li class="service_item">Internal medicine</li>
                <li class="service_item">Laser surgery</li>
                <li class="service_item">Laser therapy</li>    
                    

    <li class="service_item">Laparoscopy</li>                         
                <li class="service_item">Nutrition</li>
                <li class="service_item">Pain management</li>
                <li class="service_item">In-house pharmacy</li>
                <li class="service_item">Puppy/Kitten Care</li>
                <li class="service_item">Radiology</li>
                <li class="service_item">Senior pet care</li>
                <li class="service_item">Spay/Neuter</li>
                <li class="service_item">Surgery</li>
                <li class="service_item">Ultrasound</li>    
                <li class="service_item">Vaccinations</li>    
                <li class="service_item">Wellness</li>    
            </ul>                
           </div>

标签： htmlcss

解决方案

首先，我同意 Tyler 上面的评论——你应该考虑使用引导程序或类似的东西，而不是重新发明轮子，特别是考虑到你在这方面的经验不足。

要解决您提到的特定问题，问题在于您的 CSS 中的此选择器：

ul.menu li.menu_item:hover > ul.menu,
ul.menu li.menu ul.menu:hover {
  visibility: visible;
  opacity: 1;
  display: block;
  padding: 0;
}

ul.menu li.menu_item:hover > ul.menu正在寻找“菜单”类的子菜单，但您的子菜单具有“子菜单”类。并且ul.menu li.menu ul.menu:hover仅在子菜单悬停时才起作用……但它是隐藏的，因此您无法将鼠标悬停在它上面！

如何解决这个问题：

相反，您可以检查<a>主菜单中的链接何时悬停，然后显示子菜单，例如：

ul.menu li.menu a:hover {
  display: block;
}

我已对您的代码进行了此更改（并删除了对问题没有影响的额外代码），您可以看到它在这里工作：

ul.menu {
  background: #000000;
  list-style: none;
  margin: 0;
  padding-left: 0;
}

li.menu_item {
  color: #fff;
  background: #000000;
  display: block;
  float: left;
  padding: 1rem;
  position: relative;
  transition-duration: 0.5s;
}

li.menu_item a {
  color: #fff;
  text-decoration: none;
}

li.menu_item:hover {
  background: red;
  cursor: pointer;
}

ul.menu li.menu_item ul.sub_menu {
  background: #000000;
  min-width: 5rem;
  position: absolute;
  transition: all 0.5s ease;
  margin-top: 1rem;
  left: 0;
  display: none;
  padding: 0;
}

ul.menu li.menu_item:hover ul.sub_menu,
ul.menu li.menu a:hover {
  display: block;
  padding: 0;
}

ul.sub.menu li.menu_item ul li.menu_item {
  clear: both;
  width: 100%;
  padding: 5px;
}
<nav class="site-nav">
  <ul class="menu">
    <li class="menu_item"><a href="#">Veterinary Services</a>
      <ul class="sub_menu">
        <li class="menu_item"><a href="#">Internal Medicine</a></li>
        <li class="menu_item"><a href="#">Dental Care</a></li>
      </ul>
    </li>
    <li class="menu_item"><a href="#">Boarding</a></li>
    <li class="menu_item"><a href="#">Grooming</a></li>
    <li class="menu_item"><a href="#">Customer Portal</a></li>
    <li class="menu_item"><a href="#">About Us</a>
      <ul class="sub_menu">
        <li class="menu_item"><a href="#">Contact Us</a></li>
        <li class="menu_item"><a href="#">About Us</a></li>
        <li class="menu_item"><a href="#">Blog</a></li>
      </ul>
    </li>
  </ul>
</nav>

推荐阅读