html + css双下拉菜单

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

HTML：line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu其中添回答：

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

来源

2015-03-03 Alec Wang

听起来像手风琴菜单。 – jbutler483 2015-03-03 13:34:15

我认为这个教程很棒：http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu只要你只想支持CSS3就可以。（适用于IE9） – Tim 2015-03-03 13:51:49

我抬头的网站后，我已经解决了问题。该网站是伟大的，刚刚解决我问。非常感谢！

我用css属性来解决我的问题，我的一些源代码是错误的。

来源

2015-03-04 06:07:29

html + css双下拉菜单

回答

相关问题