Bootstrap下拉列表 - 悬停并单击

Question

所以基本上我有这个代码：

<ul class="nav navbar-nav navbar-right">
<li class="dropdown open">
    <a href="/site.html" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">Site A</a>
        <ul class="dropdown-menu" role="menu">
        <div class="page-width-normal">
            <li class="dd-block main-block">

                <a href="/site.html" class="visible-xs">
                <h4>Title 1</h4>

                </a>                           
                <a href="/site2.html">
                 <h4>Title< 2/h4>

                </a>
                <a href="/site3.html">
                <h4>Title 3</h4>

                </a>
                <a href="/site4.html">
                <h4>Private Placement</h4>

                </a>
            </li>
        </div>
        </ul>
</li>
<li><a href="site5.html">Site 5</a></li>
<li><a href="site6.html">Site 6</a></li>

</ul>

这个想法是导航栏（站点A）中的第一个菜单可以在悬停时展开，其中会出现一个下拉列表。但是，如果用户点击该链接，则应将其引导至site.html。

但是，目前，当我点击网站A链接时，它会打开下拉菜单并保持打开状态，直到我再次点击。

另一个问题是，如果我转到移动视图，用户应该可以点击网站A链接，然后它会显示下拉菜单。