下拉菜单定位标记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不起作用

回答

相关问题