Question

我有一个下拉菜单。如果我点击下拉菜单，则href无效。例如，如果我点击“子菜单1”项，那么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>

Answer 1

这里发生的问题是一个焦点问题。

单击＆＃34;菜单＆＃34;时，此菜单将被聚焦，并显示一个子列表。但是当你点击一个子项目时，你基本上会从原始菜单中模糊（聚焦），因此在点击注册之前子列表会消失。

由于焦点/模糊事件在点击事件之前触发，因此您无法单击子项目。

下拉菜单锚标记href不起作用

1 个答案: