下拉菜單定位標記href不起作用

我有一個下拉菜單。如果我點擊下拉菜單，href不起作用。例如，如果我點擊「子菜單1」項目，然後href，因爲這是行不通的。任何想法在這..請幫助我..下拉菜單定位標記href不起作用

<!DOCTYPE html> 
    <html> 
     <head> 
      <meta charset="UTF-8"> 
      <title>On click Menu</title> 
      <style> 

    #primary_nav_wrap { 
     margin-top: 15px 
    } 
    #primary_nav_wrap ul { 
     list-style: none; 
     position: relative; 
     float: left; 
     margin: 0; 
     padding: 0 
    } 
    #primary_nav_wrap ul a { 
     display: block; 
     color: #333; 
     text-decoration: none; 
     font-weight: 700; 
     font-size: 12px; 
     line-height: 32px; 
     padding: 0 15px; 
     font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif 
    } 
    #primary_nav_wrap ul li { 
     position: relative; 
     float: left; 
     margin: 0; 
     padding: 0 
    } 
    #primary_nav_wrap ul li.current-menu-item { 
     background: #ddd 
    } 
    #primary_nav_wrap ul li:hover { 
     background: #f6f6f6 
    } 
    #primary_nav_wrap ul ul { 
     display: none; 
     position: absolute; 
     top: 100%; 
     left: 0; 
     background: #fff; 
     padding: 0 
    } 
    #primary_nav_wrap ul ul li { 
     float: none; 
     width: 200px 
    } 
    #primary_nav_wrap ul ul a { 
     line-height: 120%; 
     padding: 10px 15px 
    } 
    #primary_nav_wrap ul ul ul { 
     top: 0; 
     left: 100% 
    } 
    #primary_nav_wrap ul li > a:focus + ul { 
     display: block 
    } 
      </style> 
     </head> 
     <body> 
      <h1>Testing menu</h1> 
     <div id="primary_nav_wrap"> 
      <ul> 

      <li 
     style=" 
      background-color: #007DB8; 

     "><a href="#">Menu 1</a> 
       <ul> 
       <li><a href="https://www.google.com">Sub Menu 1</a> 
       </li> 
       <li><a href="https://www.gmail.com">Sub Menu 2</a> 
       </li> 
       <li><a href="#">Sub Menu 3</a> 
       </li> 
       <li><a href="#">Sub Menu 4</a> 

        </li> 

       </ul> 
      </li> 
      <li style=" 
      background-color: #007DB8; 


     "><a href="#">Menu 2</a> 
       <ul> 
       <li><a href="#">Sub Menu 1</a> 
       </li> 
       <li><a href="#">Sub Menu 2</a> 
       </li> 
       <li><a href="#">Sub Menu 3</a> 
       </li> 
       </ul> 
      </li> 
      <li style=" 
      background-color: #007DB8; 

     "><a href="#">Menu 3</a> 
       <ul> 
       <li class="dir"><a href="#">Sub Menu 1</a> 
       </li> 
       <li class="dir"><a href="#">Sub Menu 2 </a> 

       </li> 
       <li><a href="#">Sub Menu 3</a> 
       </li> 
       <li><a href="#">Sub Menu 4</a> 
       </li> 
       <li><a href="#">Sub Menu 5</a> 
       </li> 
       </ul> 
      </li> 
      <li style=" 
      background-color: #007DB8; 

     "><a href="#">Menu 4</a> 
      <ul> 
       <li class="dir"><a href="#">Sub Menu 1</a> 
       </li> 
       <li class="dir"><a href="#">Sub Menu </a> 


        </ul> 
      </li> 

      </ul> 
     </div> 
     </body> 
    </html>

來源

2017-06-14 karthik

這裏發生的問題是焦點問題。

當你點擊一個「菜單」時，這個菜單被關注，並且一個子列表出現。但是，當您點擊一個子項目時，您基本上會從原始菜單中模糊（聚焦），因此在註冊點擊之前該子列表消失。

由於焦點/模糊事件在點擊事件之前觸發，因此無法單擊子項目。

來源

2017-06-14 12:31:43 Magador

謝謝..你能告訴我如何解決這個問題嗎？我應該使用任何其他而不是焦點嗎？請告訴我。或者我應該重寫代碼？ – karthik

下拉菜單定位標記href不起作用

回答

相關問題