我正在使用Bootstrap创建我的第一个网页，我在导航栏上显示了下拉菜单，但是，当您单击它时，它会选择栏上方的整个屏幕顶部并用蓝色突出显示它颜色。我不想要这个。我该如何解决这个问题？这是我的代码的codeply链接： Codeply：http://codeply.com/go/8H1SZB4FvV
我还在下面的评论中发布了问题的屏幕截图，因为人们似乎无法复制这个问题。
这个问题仍然没有解决，评论中有更多信息，我很感激任何帮助。
这是我的代码
<div class="imgHide">
<img src="Logo.gif" alt="image" style="width:225px;height:150px">
</div>
<div class="container">
<!-- The justified navigation menu is meant for single line per list item.
Multiple lines will require custom code not provided by Bootstrap. -->
<div class="masthead">
<h3 class="text-muted">Title</h3>
<nav>
<ul class="nav nav-justified">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li class="dropdown">
<a href="javascript:return false;" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li class="dropdown-header">Possible Header</li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li class="divider"></li>
<li class="dropdown-header">Nav header 2</li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">iteme</a></li>
<li><a href="#">item</a></li>
<li class="divider"></li>
<li class="dropdown-header">Nav header 3</li>
<li><a href="#">iteme</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
</ul>
</li>
</ul>
</nav>
</div>
<!-- Jumbotron -->
<div class="jumbotron">
<h1>Title</h1>
<p class="lead">description.</p>
<p><a class="btn btn-lg btn-success" href="../Registration Forms/indexLogin.html" role="button">Log In!</a></p>
</div>
<!-- Example row of columns -->
<div class="row">
<div class="col-lg-4 center-block">
<h2>Showcase 1</h2>
<img src="boarderline-filler.gif" alt="image" style="width:200px;height:150px">
<p class="text-danger">Some important text about a cool event</p>
<p><a class="btn btn-primary" href="#" role="button">View details »</a></p>
</div>
<div class="col-lg-4 center-block">
<h2>Showcase 2</h2>
<img src="boarderline-filler.gif" alt="image" style="width:200px;height:150px">
<p>Another showcase of some stuff.</p>
<p><a class="btn btn-primary" href="#" role="button">View details »</a></p>
</div>
<div class="col-lg-4 center-block">
<h2>Showcase 3</h2>
<img src="boarderline-filler.gif" alt="image" style="width:200px;height:150px">
<p>Here are examples of how showcases would look. (Optional)</p>
<p><a class="btn btn-primary" href="#" role="button">View details »</a></p>
</div>
</div>
<div class="col-lg-4 centerMe">
<div class="alert alert-success" role="alert">
<strong>Well done!</strong> You have earned the achievement <i>Sample Me</i>.
</div>
</div>
<!-- Site footer -->
<footer class="footer">
<p>© Company 2015</p>
</footer>
</div> <!-- /container -->
<!-- scripts to make all the features work -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"> </script>
<script src="/dist/js/bootstrap.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
这是导入到其中的实际Bootstrap CSS的link。 此外，这是我用于个人CSS的内容。
body {
padding-top: 20px;
}
.footer {
padding-top: 40px;
padding-bottom: 40px;
margin-top: 40px;
border-top: 1px solid #eee;
}
/* Main marketing message and sign up button */
.jumbotron {
text-align: center;
background-color: transparent;
}
.jumbotron .btn {
padding: 14px 24px;
font-size: 21px;
}
/* Customize the nav-justified links to be fill the entire space of the .navbar */
.nav-justified {
background-color: #eee;
border: 1px solid #ccc;
border-radius: 5px;
}
.nav-justified > li > a {
padding-top: 15px;
padding-bottom: 15px;
margin-bottom: 0;
font-weight: bold;
color: #FFFFFF;
text-align: center;
background-color: #006600; /* Old browsers */
background-image: -webkit-gradient(linear, left top, left bottom, from(#006600), to(#006600));
background-image: -webkit-linear-gradient(top, #006600 0%, #e5e5e5 300%);
background-image: -moz-linear-gradient(top, #006600 0%, #e5e5e5 300%);
background-image: -ms-linear-gradient(top, #006600 0%, #e5e5e5 300%);
background-image: -o-linear-gradient(top, #006600 0%, #e5e5e5 300%);
background-image: -webkit-gradient(linear, left top, left bottom, from(top), color-stop(0%, #006600), to(#006600));
background-image: linear-gradient(top, #006600 0%, #e5e5e5 300%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#006600', endColorstr='#006600',GradientType=0 ); /* IE6-9 */
background-repeat: repeat-x; /* Repeat the gradient */
border-bottom: 1px solid #d5d5d5;
}
.nav-justified > .active > a,
.nav-justified > .active > a:hover,
.nav-justified > .active > a:focus {
background-color: #006600;
background-image: none;
-webkit-box-shadow: inset 0 3px 7px rgba(0,0,0,.15);
box-shadow: inset 0 3px 7px rgba(0,0,0,.15);
}
.nav-justified > li:first-child > a {
border-radius: 5px 5px 0 0;
}
.nav-justified > li:last-child > a {
border-bottom: 0;
border-radius: 0 0 5px 5px;
}
@media (min-width: 768px) {
.nav-justified {
max-height: 52px;
}
.nav-justified > li > a {
border-right: 1px solid #d5d5d5;
border-left: 1px solid #fff;
}
.nav-justified > li:first-child > a {
border-left: 0;
border-radius: 5px 0 0 5px;
}
.nav-justified > li:last-child > a {
border-right: 0;
border-radius: 0 5px 5px 0;
}
}
/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
/* Remove the padding we set earlier */
.masthead,
.marketing,
.footer {
padding-right: 0;
padding-left: 0;
}
body
{
background-color:lightblue
}
}