不确定如何解决这个问题，我想这更像是一个概念验证。我有一个引导旋转木马，有几个滚动的图像，图像是产品。我的客户在网站上看到了一些东西，想知道它是否可能。我的问题是我将如何处理它，我输入的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>
希望有人理解，也许可以帮助我或指出正确的方向，谢谢。
答案 0 :(得分：0)
要在图片轮播顶部显示菜单，请将新的顶级菜单代码放在myCarousel上方，其位置应为absolute且z-index大于1且{ {1}}。
另外，不要忘记将width:100%位置添加到relative类div。
请参阅以下代码 -
+在CSS下面添加 -
well编辑HTML -
/* 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;
}