我正在尝试使用我的导航栏中的“马匹”选项卡，当我将鼠标悬停在它上面或单击它时，会出现一个下拉菜单。我希望“马匹”选项卡的下拉列表中包含一个无序列表，其中包含“马驹”、“母马”和“种马”。任何帮助将不胜感激。
<!DOCTYPE html>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>VS Equine - European Sport Horses</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/business-casual.css" rel="stylesheet">
<!-- Fonts -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Josefin+Slab:100,300,400,600,700,100italic,300italic,400italic,600italic,700italic" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<div class="brand">VS Equine</div>
<div class="address-bar">Viksbergs Sateri | Sodertalje, Sweden | +46-70 699 67 40</div>
<!-- Navigation -->
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- navbar-brand is hidden on larger screens, but visible when the menu is collapsed -->
<a class="navbar-brand" href="index.html">VS Equine</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="about.html">About</a>
</li>
<li>
<a href="blog.html">Horses</a>
</li>
<li>
<a href="USedition.html">US Edition</a>
</li>
<li>
<a href="contact.html">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<div class="container">
<div class="row">
<div class="box">
<div class="col-lg-12 text-center">
<div id="carousel-example-generic" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators hidden-xs">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img class="img-responsive img-full" src="img/slide-1.jpg" alt="">
</div>
<div class="item">
<img class="img-responsive img-full" src="img/slide-2.jpg" alt="">
</div>
<div class="item">
<img class="img-responsive img-full" src="img/slide-3.jpg" alt="">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
<h2 class="brand-before">
<small>Welcome to</small>
</h2>
<h1 class="brand-name">VS Equine</h1>
<hr class="tagline-divider">
<h2>
<strong>European Sport Horses</strong>
</small>
</h2>
</div>
</div>
</div>
<div class="row">
<div class="box">
<div class="col-lg-12">
<hr>
<h2 class="intro-text text-center">We don't just breed horses
<strong>We raise champions!</strong>
</h2>
<hr>
<img class="img-responsive img-border img-left" src="img/intro-pic.jpg" alt="">
<hr class="visible-xs">
<p>Viksbergs Säteri driver en liten familjeuppfödning med bara några få föl som föds varje år, i regel inte mer än 5. Vårt syfte med varje föl är att det skall bli en svårklasshäst som tävlar om de stora priserna i framtiden. </p>
<p>Vi sysslar inte med massuppfödning! Vi är djupt specialiserade på hopphästar av den högsta kalibern. Vi använder därför enbart ston som antingen har visat sig ge fantastiska avkommor tidigare eller som själva har visat att de är av yppersta klass, helst både och.</p>
<p>Vi bygger på lång sikt och hållbarhet är ett av våra ledord. På det viset skapar vi hästar som har stor kapacitet, har tillit till sin ryttare, håller på lång sikt och gör det där extra för sin ryttare som är helt avgörande i de stora klasserna. Många elitryttare kan intyga att just kopplingen mellan ryttaren (människan) och hästen är helt avgörande för resultatet. Vi tror att det är detta som skapar Champions som håller på lång sikt!.</p>
</div>
</div>
</div>
<div class="row">
<div class="box">
<div class="col-lg-12">
<hr>
<h2 class="intro-text text-center">VS Equine
<strong>and partners</strong>
</h2>
<hr>
<p>Vi samarbetar med andra företag i hästbranchen – både i Sverige och utomlands. Vi ställer samma krav på dem som vi ställer på oss själva. Ärlighet, Öppenhet, Hållbarhet och Kvalitet är våra ledord. För att arbeta väl tillsammans behöver även våra samarbetspartners ha samma värdegrund som vi själva har. </p>
<p>Vårt samarbete med andra gör att vi ofta kan finna den specifika häst som en potentiell kund söker, även om vi inte har en sådan själv. Vi har möjlighet att före köpet ge hästen den speciella träning som behövs för att den skall passa sin nya ryttare. Om du funderar på att köpa en ny häst ställ därför gärna en förfrågan till oss på: info@VS-equine.eu.</p>
</div>
</div>
</div>
</div>
<!-- /.container -->
<footer>
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<p>Copyright © VS Equine 2015</p>
</div>
</div>
</div>
</footer>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Script to Activate the Carousel -->
<script>
$('.carousel').carousel({
interval: 5000 //changes the speed
})
</script>
最佳答案
要有下拉菜单，您首先需要标记来执行此操作，如 here 所列.
标记应如下所示(我们还将添加一个 id 来设置悬停功能):
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" id="hover-drop">Horses <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Foals</a></li>
<li><a href="#">Mares</a></li>
<li><a href="#">Stallions</a></li>
</ul>
</li>
现在对于 javascript，它将获取我们创建的元素，以在我们悬停时进行跟踪(我们还可以将代码包围在初始化程序中，以便在所有查询元素完成并且文档准备就绪之前它不会启动):
<script>
$(function() {
$('.carousel').carousel({
interval: 5000 //changes the speed
})
$('#hover-drop').hover(function() {
$(this).dropdown('toggle');
});
});
</script>
那么整个页面看起来像这样:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>VS Equine - European Sport Horses</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/business-casual.css" rel="stylesheet">
<!-- Fonts -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Josefin+Slab:100,300,400,600,700,100italic,300italic,400italic,600italic,700italic" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="brand">VS Equine</div>
<div class="address-bar">Viksbergs Sateri | Sodertalje, Sweden | +46-70 699 67 40</div>
<!-- Navigation -->
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- navbar-brand is hidden on larger screens, but visible when the menu is collapsed -->
<a class="navbar-brand" href="index.html">VS Equine</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="about.html">About</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" id="hover-drop">Horses <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Foals</a></li>
<li><a href="#">Mares</a></li>
<li><a href="#">Stallions</a></li>
</ul>
</li>
<li>
<a href="USedition.html">US Edition</a>
</li>
<li>
<a href="contact.html">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<div class="container">
<div class="row">
<div class="box">
<div class="col-lg-12 text-center">
<div id="carousel-example-generic" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators hidden-xs">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img class="img-responsive img-full" src="img/slide-1.jpg" alt="">
</div>
<div class="item">
<img class="img-responsive img-full" src="img/slide-2.jpg" alt="">
</div>
<div class="item">
<img class="img-responsive img-full" src="img/slide-3.jpg" alt="">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
<h2 class="brand-before">
<small>Welcome to</small>
</h2>
<h1 class="brand-name">VS Equine</h1>
<hr class="tagline-divider">
<h2>
<strong>European Sport Horses</strong>
</small>
</h2>
</div>
</div>
</div>
<div class="row">
<div class="box">
<div class="col-lg-12">
<hr>
<h2 class="intro-text text-center">We don't just breed horses
<strong>We raise champions!</strong>
</h2>
<hr>
<img class="img-responsive img-border img-left" src="img/intro-pic.jpg" alt="">
<hr class="visible-xs">
<p>Viksbergs Säteri driver en liten familjeuppfödning med bara några få föl som föds varje år, i regel inte mer än 5. Vårt syfte med varje föl är att det skall bli en svårklasshäst som tävlar om de stora priserna i framtiden. </p>
<p>Vi sysslar inte med massuppfödning! Vi är djupt specialiserade på hopphästar av den högsta kalibern. Vi använder därför enbart ston som antingen har visat sig ge fantastiska avkommor tidigare eller som själva har visat att de är av yppersta klass, helst både och.</p>
<p>Vi bygger på lång sikt och hållbarhet är ett av våra ledord. På det viset skapar vi hästar som har stor kapacitet, har tillit till sin ryttare, håller på lång sikt och gör det där extra för sin ryttare som är helt avgörande i de stora klasserna. Många elitryttare kan intyga att just kopplingen mellan ryttaren (människan) och hästen är helt avgörande för resultatet. Vi tror att det är detta som skapar Champions som håller på lång sikt!.</p>
</div>
</div>
</div>
<div class="row">
<div class="box">
<div class="col-lg-12">
<hr>
<h2 class="intro-text text-center">VS Equine
<strong>and partners</strong>
</h2>
<hr>
<p>Vi samarbetar med andra företag i hästbranchen – både i Sverige och utomlands. Vi ställer samma krav på dem som vi ställer på oss själva. Ärlighet, Öppenhet, Hållbarhet och Kvalitet är våra ledord. För att arbeta väl tillsammans behöver även våra samarbetspartners ha samma värdegrund som vi själva har. </p>
<p>Vårt samarbete med andra gör att vi ofta kan finna den specifika häst som en potentiell kund söker, även om vi inte har en sådan själv. Vi har möjlighet att före köpet ge hästen den speciella träning som behövs för att den skall passa sin nya ryttare. Om du funderar på att köpa en ny häst ställ därför gärna en förfrågan till oss på: info@VS-equine.eu.</p>
</div>
</div>
</div>
</div>
<!-- /.container -->
<footer>
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<p>Copyright © VS Equine 2015</p>
</div>
</div>
</div>
</footer>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Script to Activate the Carousel And add hover -->
<script>
$(function() {
$('.carousel').carousel({
interval: 5000 //changes the speed
});
$('#hover-drop').hover(function() {
$(this).dropdown('toggle');
});
});
</script>
</body>
</html>
此外，正确格式化问题中的代码也有助于发现错误。
关于html - Bootstrap 下拉菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28651108/