bootstrap搜索框：click下拉展开改hover展开（两种代码）

bootstrap搜索框：click下拉展开改hover展开（两种代码）

问题：

1. 实现顶部导航的鼠标悬停下拉展开的效果；
2. 实现的滚不导航区域：搜索框组件之点击下拉展开 变更为 鼠标悬停展开下拉选项条件的效果；
3. 解决 2 中所述悬停后，鼠标下移选择时，菜单折叠消失的问题；

---

代码块 · 效果 · 截图 · 对比：

• 代码1 ：
  

• 代码 2：
  

---

主要代码 · 示下：

<div class="form-inline my-2 my-lg-0">
	<!-- 搜索框 -->									
	<div class="input-group search-wrap hoverdrop">
		<div class="input-group-prepend">
			<!--代码1-->
			<!--<a class="nav-link font14 dropdown-toggle" href="#" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">全站</a>
			<div class="dropdown-menu shadow border-0" aria-labelledby="navbarDropdown2" style="left: ;width:;">
					<a class="dropdown-item font14" href="">海报</a>
					<a class="dropdown-item font14" href="">文档</a>
			</div>-->
			<!--代码2-->
			<button class="btn  dropdown-toggle font14 search-style" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">全站</button>
			<div class="dropdown-menu shadow border-0" style="min-width: 104px;top: 35px;">
				<a class="dropdown-item font14" href="#">海报</a>
				<a class="dropdown-item font14" href="#">文档</a>
			</div>
		</div>
		<input type="text" class="form-control search-style font14" id="input-search" placeholder="请输入" aria-label="请输入商品名称" aria-describedby="button-search">
		<div class="input-group-append">											
			<button class="btn btn-light iconfont iconsousuo search-style font14" type="submit" id="button-search"><!-- 搜索 --></button>
		</div>
	</div>
	<!-- 用户头像 -->
	<a class="nav-link user-header-pic" href="#">
		<icon class="iconfont iconhuiyuanzhongxin font32"></icon>
	</a>
    <ul class="navbar-nav mr-auto">
		<li class="nav-item active">
			<a class="nav-link font14" href="#">登录 <span class="sr-only">(current)</span></a>
		</li>
		<li class="nav-item">
			<a class="nav-link font14" href="#">注册</a>
		</li>
	</ul>
</div>

---

主要代码 · css定义：

/*悬停下拉导航设置*/
/*.navbar .hoverdrop > li .dropdown-menu {margin: 0;}  
.navbar .hoverdrop > li:hover .dropdown-menu {display: block;}*/

/*搜索框下拉选择设置*/
.search-wrap.hoverdrop > .input-group-prepend:hover .dropdown-menu {display: block;}

---

重要声明 · 注意说明：

1. 注意css定义的类.search-wrap
.search-wrap.hoverdrop > .input-group-prepend:hover .dropdown-menu {display: block;}
2. 注意代码1、代码2的效果对比研究；
3. 代码2 样式绑定.search-style
.search-style{background-color: #f3f4f9;border-color: #f3f4f9;height: 42px;}
4. 代码中top: 35px;定义是为了解决文章中的问题3；

---

以上就是关于“bootstrap搜索框：click下拉展开改hover展开（两种代码）”的全部内容。