I have quite a few problems with the dropdown menus provided by twitter bootstrap and their style (in Internet explorer 8 and 9).
When I look at the drop-down example in the official twitter download documentation http://getbootstrap.com/2.3.2/javascript.html#dropdowns , the drop-down lists from the "within the navigation bar" have a beautiful white carat as part of the drop-down list, the agreed border is 1px and correctly position with 1px space between each other (border) and the navigation bar.
Meanwhile, when I build the navbar as part of my application, the white carat is gone, the border is incompatible, and the interval is incorrect. I suspect the latter happens with drop-down “shortcuts” (for example, “Dropdown”, “Dropdown 2” and “Dropdown 3”), because the hover effect (gray background) on them does not fill the entire height of the navigation bar.
The following screenshot should illustrate the differences between the official documentation in IE 8 and my test case in IE 8 and Chrome:
( http://i.imgur.com/x5grl5P.png )
The test script was created as a direct copy of the markup from the bootstrap documents, with the standard head / body and js / css template, I loaded it as an entity: https://gist.github.com/galvanist/6121685
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Test</title> <link href="./css/bootstrap.min.css" media="all" rel="stylesheet" type="text/css" /> </head> <body> <div class="container"> <h1>Bootstrap Dropdown Test</h1> <div id="navbar-example" class="navbar navbar-static"> <div class="navbar-inner"> <div class="container" style="width: auto;"> <a class="brand" href="#">Project Name</a> <ul class="nav" role="navigation"> <li class="dropdown"> <a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu" role="menu" aria-labelledby="drop1"> <li role="presentation"><a role="menuitem" tabindex="-1" href="http://google.com">Action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#anotherAction">Another action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> <li role="presentation" class="divider"></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> </ul> </li> <li class="dropdown"> <a href="#" id="drop2" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2 <b class="caret"></b></a> <ul class="dropdown-menu" role="menu" aria-labelledby="drop2"> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> <li role="presentation" class="divider"></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> </ul> </li> </ul> <ul class="nav pull-right"> <li id="fat-menu" class="dropdown"> <a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 3 <b class="caret"></b></a> <ul class="dropdown-menu" role="menu" aria-labelledby="drop3"> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> <li role="presentation" class="divider"></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> </ul> </li> </ul> </div> </div> </div> </div> <script src="./js/jquery.min.js" type="text/javascript"></script> <script src="./js/bootstrap.min.js" type="text/javascript"></script> </body> </html>
The test example uses twitter bootstrap v2.3.2 (standard zip downloaded from documents), jQuery v1.10.2 and HTML5 Shiv v3.6.2, I started with older versions of these and without html shiv (which I do not think helps) without luck.
Gavin source share