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雙下拉菜單

回答

相關問題