So basically I have this code:
<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>
The idea is that the first menu in the navbar (Site A) can be expanded on hover, where a dropdown appears. But if the user clicks the link it should lead him to site.html.
However, currently, when I click the Site A link, it opens the dropdown and stays open until I click again.
Another problem is, if I go to mobile view, the user should be able to click Site A link, and it would then show the dropdown menu.