I am using bootstrap3 and have created a dropdown menu, the children of the top level are working ok but the parent is not working when I try to say click on 'About', it just shows the children and does not go to about.php
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li><a href="index.php">Home</a>
</li>
<li class="dropdown"><a href="about.php" data-toggle="dropdown" class="dropdown-toggle">About<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="hours.php">Hours</a> </li>
<li><a href="terms.php">Terms/Conditions of Hire</a> </li>
</ul>
</li>
<li><a href="location.php">Find Us</a>
</li>
<li><a href="services.php">Services</a>
</li>
<li><a href="contact.php">Contact</a>
</li>
</ul>
</div>
What you are trying to do doesn't work because dropdowns are made to be clicked, and have no action but to open a menu. You can clearly see that in the examples here in the documentation
If you made your button go to about.php when you clicked About you would never be able to open the dropdown menu to select other items.
If you want a button you can click AND a dropdown menu you should look at adding a Split Button Dropdown (documentation here) which will give the use a clickable button, and a dropdown arrow to select more options.
The navbar child elements are set to work based on toggle. So, practically, when you click on 'About', the child elements should appear. Now for your requirement, you could change it to show the child elements on hover so that you get to click the 'About' link.
So first, remove these two properties from your anchor tag:
class="dropdown-toggle" data-toggle="dropdown"
Next, in your css, set the child menu to be displayed on hover:
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
For the working you can check: