如何使用焦點（僅限CSS）在單擊時創建嵌套下拉菜單？

我之前問過一個關於如何通過css製作下拉菜單的問題。現在我已經完美地運作了。但現在我需要對點擊做出反應。我試圖創建的菜單將有2套嵌套列表項目。我使用僞選擇器：專注於一級列表項。但是當我嘗試顯示嵌套列表項時，當然我失去了焦點部分。是否有可能以某種方式保持第一級列表項目保持專注，而用戶在菜單中更深入？如何使用焦點（僅限CSS）在單擊時創建嵌套下拉菜單？

我的HTML代碼是這樣的

<header class="Header"> 
    <!-- Head navigation--> 
    <div> 
    <a href="#" title="cart"> <img src="images/cart_logo_webb_design.svg" alt="cart"></a> 
    <a href="#" title="Search"> <img src="images/search_logo_webb_design.svg" alt="search glass"></a> 
    </div> 
    <div> <img src="images/k_logo_webb_design.svg" alt="CompanyLogo"> </div> 
    <div> 
    <nav id="MainNavigation"> 
    <a href="#" id="menuIcon"><img src="images/menu_logo_webb_design.svg" alt="Menu icon"></a> 
    <ul id="dropDownMenu"> 
     <li> 
     <a class="Sub_Menu_Link" href="#" title="Woman">Woman 
     </a> 
     <li> 
     <a class="Sub_Menu_Link" href="#" title="Womanplus">+ 
     </a> 

     <ul> 
      <li><a href="#">1</a> </li> 
      <li><a href="#">2</a> </li> 
      <li><a href="#">3</a> </li> 
      <li><a href="#">4</a> </li> 
      <li><a href="#">5</a> </li> 
     </ul> 
     </li> 
     </li> 
     <li> <a class="Sub_Menu_Link" href="#" title="Man">Man</a> 
     <li> 
     <a class="Sub_Menu_Link" href="#" title="Manplus">+ 
     </a> 

     <ul> 
      <li><a href="#">1</a> </li> 
      <li><a href="#">2</a> </li> 
      <li><a href="#">3</a> </li> 
      <li><a href="#">4</a> </li> 
      <li><a href="#">5</a> </li> 
     </ul> 
     </li> 
     </li> 
     <li><a class="Sub_Menu_Link" href="#" title="Sale">Sale</a></li> 
    </ul> 
    </nav> 
    </div> 
</header>

而CSS是這裏

header { 
    position: fixed; 
    display: block; 
    background: white; 
    z-index: 1; 
    width: 100%; 
    top: 0; 
} 

.Header img { 
    width: 36px; 
    height: 40px; 

    } 

header div { 
    float: right; 
    width: 33.33%; 
    margin: 0; 
} 

header div:first-of-type a { 
    padding: 0%; 
} 



header div:after { 
    content: ""; 
    visibility: hidden; 
    display: block; 
    clear: both; 
} 

nav { 
    position: relative; 
    left: 0; 
} 


nav > ul { 
    margin: 0; 
    padding: 0 0px;; 
    float: left; 
    line-height: 40px; 
} 

nav a { 
    positon: absolute; 
    left: 0; 
} 

nav ul ul { 
    padding: 20px; 
} 
nav ul a { 
    list-style: none; 
    text-decoration: none; 
} 
nav ul ul li a { 
    display: inline-block; 
} 

nav > ul:after { 
    content: ""; 
    visibility: hidden; 
    display: block; 
    clear: both; 
} 
.Sub_Menu_Link { 
    display: inline-block; 
    padding: 10px 0px; 
    line-height: 40px; 
} 

.Sub_Menu_Link:hover { 
    color: yellow; 
} 

nav ul { 
    background: #E9E9E9; 
    position: relative; 
    width: 100%; 
} 
nav ul ul li a:hover { 
    color: yellow; 
} 

nav ul ul { 
    display: none; 
} 

nav ul a:focus { 
    background: red; 
} 

nav ul a:focus ~ ul { 
    display: block; 
} 

nav > a:hover { 
    background-color: red; 
} 

nav > a:focus { 
    background-color: green; 
} 
nav ul { 
    display: none; 
} 

nav > a:focus ~ ul { 
    display: block; 
}

來源

2017-02-22 Patrik

上市這是不可能的:focus選擇做簡單。在CSS中，您不能選擇元素的父元素，以便保持可見性並將焦點放在子元素上。舉個例子：

element:focus -parent { /* this doesn't exist */ }

這根本就不存在，因爲現在。而且你也不能專注於多個元素，這就增加了這個問題。

有跡象表明，我能想到的解決你的問題的方法有兩種：

使用JavaScript事件onclick而不是隻CSS的方法;
維護純CSS方法，並使用input:checked而不是:focus作爲觸發器。它被稱爲The Checkbox Hack。

來源

2017-02-22 20:56:00

如何使用焦點（僅限CSS）在單擊時創建嵌套下拉菜單？

回答

相關問題