不确定该怎么做，我想它更像是一个概念验证。我有一个引导轮播，其中有几个滚动的图像，图像是产品。我的客户在网站上看到了一些东西，想知道它是否可行。我的问题是我将如何处理它，我将在我的 html 或 CSS 中输入滚动图像上的下拉菜单。
这是我的旋转木马 http://modernstudiotest.jbglobal.net/slider_menu.html
这是网站，菜单出现的地方，基本上是你 将鼠标光标指向顶部，然后会出现一个白色菜单。 https://www.specialized.com/us/en/
$(document).ready(function() {
$('#myCarousel').carousel({
interval: 0
})
}); @charset "UTF-8";
/* CSS Document */
.carousel-control.left, .carousel-control.right {
background-image: none
}
.carousel {
margin-bottom: 0;
padding: 0 40px 30px 40px;
}
/* Reposition the controls slightly */
.carousel-control {
left: -12px;
}
.carousel-control.right {
right: -12px;
}
/* Changes the position of the indicators */
.carousel-indicators {
right: 50%;
top: auto;
bottom: 0px;
margin-right: -19px;
}
/* Changes the colour of the indicators */
.carousel-indicators li {
background: #c0c0c0;
}
.carousel-indicators .active {
background: #000000;
}
.well {
background: #ffffff
}
.thumbnail {
border-style: none;
}
.col-mid-12 {
border-style: none;
}
.carousel-control {
position: absolute;
top: 40%; /* pushes the icon in the middle of the height */
z-index: 5;
display: inline-block;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12">
<div class="well">
<div id="myCarousel" class="carousel slide" data-interval="false">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active">
<div class="row-fluid">
<div class="col-xs-2 col-xs-offset-1"><a href="#x" class="thumbnail"><img src="img/middle_slider_1a.jpg" alt="Image" style="max-width:125%;" /></a></div>
<div class="col-xs-2"><a href="#x" class="thumbnail"><img src="img/middle_slider_1b.jpg" alt="Image" style="max-width:125%;" /></a></div>
<div class="col-xs-2"><a href="#x" class="thumbnail"><img src="img/middle_slider_1c.jpg" alt="Image" style="max-width:125%;" /></a></div>
<div class="col-xs-2"><a href="#x" class="thumbnail"><img src="img/middle_slider_1d.jpg" alt="Image" style="max-width:125%;" /></a></div>
<div class="col-xs-2"><a href="#x" class="thumbnail"><img src="img/middle_slider_1e.jpg" alt="Image" style="max-width:125%;" /></a></div>
</div><!--/row-fluid-->
</div><!--/item-->
<div class="item">
<div class="row-fluid">
<div class="col-xs-2 col-xs-offset-1"><a href="#x" class="thumbnail"><img src="img/middle_slider_2a.jpg" alt="Image" style="max-width:125%;" /></a></div>
<div class="col-xs-2"><a href="#x" class="thumbnail"><img src="img/middle_slider_2b.jpg" alt="Image" style="max-width:125%;" /></a></div>
<div class="col-xs-2"><a href="#x" class="thumbnail"><img src="img/middle_slider_2c.jpg" alt="Image" style="max-width:125%;" /></a></div>
<div class="col-xs-2"><a href="#x" class="thumbnail"><img src="img/middle_slider_2d.jpg" alt="Image" style="max-width:125%;" /></a></div>
<div class="col-xs-2"><a href="#x" class="thumbnail"><img src="img/middle_slider_2e.jpg" alt="Image" style="max-width:125%;" /></a></div>
</div><!--/row-fluid-->
</div><!--/item-->
<div class="item">
<div class="row-fluid">
<div class="col-xs-2 col-xs-offset-1"><a href="#x" class="thumbnail"><img src="img/middle_slider_3a.jpg" alt="Image" style="max-width:125%;" /></a></div>
<div class="col-xs-2"><a href="#x" class="thumbnail"><img src="img/middle_slider_3b.jpg" alt="Image" style="max-width:125%;" /></a></div>
<div class="col-xs-2"><a href="#x" class="thumbnail"><img src="img/middle_slider_3c.jpg" alt="Image" style="max-width:125%;" /></a></div>
<div class="col-xs-2"><a href="#x" class="thumbnail"><img src="img/middle_slider_3d.jpg" alt="Image" style="max-width:125%;" /></a></div>
<div class="col-xs-2"><a href="#x" class="thumbnail"><img src="img/middle_slider_3e.jpg" alt="Image" style="max-width:125%;" /></a></div>
</div><!--/row-fluid-->
</div><!--/item-->
</div><!--/carousel-inner-->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">
<span>
<img src="img/ms_Lft_arrow.png" />
</span>
<a class="carousel-control right" href="#myCarousel" data-slide="next">
<span>
<img src="img/ms_rt_arrow.png" />
</span>
</a></a>
</div><!--/myCarousel-->
</div><!--/well-->
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>希望有人理解，也许可以帮助我或为我指明正确的方向，谢谢。
最佳答案
要在图像轮播的顶部显示菜单，请将新的顶部菜单代码放在 myCarousel 上方，它的位置应该是 absolute 和 z -index 大于 1 且 width:100%。
此外，不要忘记将 relative 位置添加到 well 类 div。
请看下面的代码-
+在 CSS 下方添加 -
/* Dropdown Button */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
和编辑的 HTML -
<html><head>
<meta charset="UTF-8">
<title>Slider_menu</title>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/ms_style.css" rel="stylesheet" type="text/css">
<script>
$(document).ready(function() {
$('#myCarousel').carousel({
interval: 0
})
});
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="well" style="position:relative">
<!-- Your Menu code will be here -->
<div class="dropdown" style="position: absolute; z-index: 20;">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class=""></li>
<li data-target="#myCarousel" data-slide-to="1" class=""></li>
<li data-target="#myCarousel" data-slide-to="2" class="active"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item">
<div class="row-fluid">
<div class="col-xs-2 col-xs-offset-1"><a href="#x" class="thumbnail"><img src="img/middle_slider_1a.jpg" alt="Image" style="max-width:125%;"></a></div>
<div class="col-xs-2"><a href="#x" class="thumbnail"><img src="img/middle_slider_1b.jpg" alt="Image" style="max-width:125%;"></a></div>
<div class="col-xs-2"><a href="#x" class="thumbnail"><img src="img/middle_slider_1c.jpg" alt="Image" style="max-width:125%;"></a></div>
<div class="col-xs-2"><a href="#x" class="thumbnail"><img src="img/middle_slider_1d.jpg" alt="Image" style="max-width:125%;"></a></div>
<div class="col-xs-2"><a href="#x" class="thumbnail"><img src="img/middle_slider_1e.jpg" alt="Image" style="max-width:125%;"></a></div>
</div><!--/row-fluid-->
</div><!--/item-->
<div class="item">
<div class="row-fluid">
<div class="col-xs-2 col-xs-offset-1"><a href="#x" class="thumbnail"><img src="img/middle_slider_2a.jpg" alt="Image" style="max-width:125%;"></a></div>
<div class="col-xs-2"><a href="#x" class="thumbnail"><img src="img/middle_slider_2b.jpg" alt="Image" style="max-width:125%;"></a></div>
<div class="col-xs-2"><a href="#x" class="thumbnail"><img src="img/middle_slider_2c.jpg" alt="Image" style="max-width:125%;"></a></div>
<div class="col-xs-2"><a href="#x" class="thumbnail"><img src="img/middle_slider_2d.jpg" alt="Image" style="max-width:125%;"></a></div>
<div class="col-xs-2"><a href="#x" class="thumbnail"><img src="img/middle_slider_2e.jpg" alt="Image" style="max-width:125%;"></a></div>
</div><!--/row-fluid-->
</div><!--/item-->
<div class="item active">
<div class="row-fluid">
<div class="col-xs-2 col-xs-offset-1"><a href="#x" class="thumbnail"><img src="img/middle_slider_3a.jpg" alt="Image" style="max-width:125%;"></a></div>
<div class="col-xs-2"><a href="#x" class="thumbnail"><img src="img/middle_slider_3b.jpg" alt="Image" style="max-width:125%;"></a></div>
<div class="col-xs-2"><a href="#x" class="thumbnail"><img src="img/middle_slider_3c.jpg" alt="Image" style="max-width:125%;"></a></div>
<div class="col-xs-2"><a href="#x" class="thumbnail"><img src="img/middle_slider_3d.jpg" alt="Image" style="max-width:125%;"></a></div>
<div class="col-xs-2"><a href="#x" class="thumbnail"><img src="img/middle_slider_3e.jpg" alt="Image" style="max-width:125%;"></a></div>
</div><!--/row-fluid-->
</div><!--/item-->
</div><!--/carousel-inner-->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">
<span>
<img src="img/ms_Lft_arrow.png">
</span>
</a><a class="carousel-control right" href="#myCarousel" data-slide="next">
<span>
<img src="img/ms_rt_arrow.png">
</span>
</a>
</div><!--/myCarousel-->
</div><!--/well-->
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>
</body></html>
关于html - 图片上的下拉菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39760082/