Bootstrap dropdown menu a:hover not full li:hover

Question

What is the best way to toggle display of my second level dropdown menu when hovering over "a"...not when hovering over the full "li"?

I use bootstrap and fiddle is : http://jsfiddle.net/2Smgv/3100/

    <div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
      <div class="container-fluid">
            <li class="dropdown">
              <a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li>
                    <a href="#">2-level Dropdown <i class="icon-arrow-right"></i></a>
                    <ul class="dropdown-menu sub-menu">
                        <li><a href="#">Action</a></li>
                        </li>
                    </ul>
                </li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
              </ul>
            </li>
          </ul>
          <form action="" class="navbar-search pull-left">
            <input type="text" placeholder="Search" class="search-query span2">
          </form>
          <ul class="nav pull-right">
            <li><a href="#">Link</a></li>
            <li class="divider-vertical"></li>
            <li class="dropdown">
              <a class="#" href="#">Menu</a>
            </li>
          </ul>
        </div><!-- /.nav-collapse -->
      </div>
  </div>
</div>

Answer 1

I did not understand your question originally, and have updated my "answer" as such:

It is not possible to complete the modification you are requesting because the hover would be broken. The display of and ability to mouse over sublist items functions because those items are within the parent list. If you change the hover to the anchor tag, once you attempt to use the links within the subnav you will be outside of the anchor tag and thus removing the hover effect.

If you look at your markup, the

"2-level Dropdown" also contains the and the with class .sub-menu. Thus hovering over the sub-menu is also over the parent

(2-level Dropdown).

However, the containing "2-level Dropdown" ends with that text and the moving your cursor over the sibling sub-menu means you are no longer hovering over the .

I hope this explains why it is not possible and allows you to gain an understanding of the reasons why.

Upvotes: 1