Question

我想创建双拉下菜单，我使用了html + css。理想的菜单应该是这样的：当鼠标悬停在“People”上时，会出现第一个下拉菜单，其中包括“Presenter”“Staff”和“Student”。然后鼠标悬停在“Presenter”上会出现第二个下拉菜单“PresenterA”，悬停在“Staff”上会出现第二个下拉菜单“StaffA”“StaffB”“StaffC”。问题是：我做了第一个下拉菜单，没问题，但是当我做了第二个下拉菜单时，出现了问题。我一次又一次地尝试，但它仍然是错的。我认为.popup和.popupli在css中有一些问题，请帮我解决这个问题，如何更改css？非常感谢！

HTML：

<li class="{% if page.author %}current{% endif %}">
    <a href="/news/">People</a>
    <ul>
      <div class="popup">
       <li><a href="#">Presenter</a></li>
          <ul>
            <div class="popupli">
              <li><a href="#">PresenterA</a></li>
            </div>
          </ul>
       <li><a href="#">Staff</a></li>
          <ul>
            <div class="popupli">
              <li><a href="#">StaffA</a></li>
              <li><a href="#">StaffB</a></li>
              <li><a href="#">StaffC</a></li>
            </div>
          </ul>
       <li><a href="#">Student</a></li>
          <ul>
            <div class="popupli">
              <li><a href="#">Student1</a></li>
              <li><a href="#">Student2</a></li>
              <li><a href="#">Student3</a></li>
            </div>
          </ul>
      </div>
    </ul>
  </li>

css:
li { display: inline-block; }
  li:hover .popup
  {
       display:block;
  }
/*  li :hover .popupli
  {
       display:block;
  } */
  .popup
     {
        display:none;
    text-align:left;
    position:absolute;
    z-index:9999;
    width:8em;
    background-color: #333;
    padding: 0.0em;
        li:hover .popupli
        {
            display:block;
        }
     }
   .popupli
     {
        display:none;
    text-align:right;
    position:absolute;
    z-index:9999;
    width:8em;
    background-color: #333;
    padding: 0.0em;
     }

Answer 1

在我查阅网站后，我解决了问题：蒂姆回答说：line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu。该网站很棒，刚刚解决了我的要求。非常感谢！

我用过＆gt;在css中的属性来解决我的问题，我的一些原始代码是错误的。

html + css双下拉菜单

1 个答案: