页面未重定向到<a href=""> tag</a>中的位置

Question

<ul class="dropdown-menu" role="menu">
    <li data-submenu-id="submenu-patas"> <a href="products.html">Books & Audible <span style="float:right; padding-left:10px; padding-top:2px;"><i class="fa fa-angle-right"></i></span></a>
                  <div id="submenu-patas" class="popover nav_bg_books">
                    <h3 class="popover-title">Books & Audible</h3>
                    <ul style="float:left; z-index:999; ">
                      <h5 style="color:#C30">Books</h5>
                      <li><a href="products.html">Books</a> </li>
                      <li><a href="products.html">Textbooks</a></li>
                      <li><a href="products.html">Magazine</a></li>
                    </ul>
                    <ul style="float:left; z-index:999;">
                      <h5  style="color:#C30">Audible</h5>
                      <li><a href="products.html">Audible Audiobooks</a></li>
                      <li><a href="products.html">Books with Audio Companions</a></li>
                    </ul>
                  </div>
                </li>
</ul>

我有一个像上面这样的html内容。当我鼠标悬停在Books＆amp;听到它会显示其子项目。但是当我点击主要或其子类别时，它不会重定向到相应的页面