您好，我正在使用Bootstrap 4和带插入符号的设计菜单栏。
在此代码中，它具有下拉菜单。当用户单击 LAPTOP ， CAMERA 或 MOBILE 之类的标题时。它列出了产品列表。所以我的要求是，当用户单击标题下拉列表时，应该具有一定的平滑过渡效果。所以请让我知道如何实现。
.nav-link-type-three {
padding-right: 2.5rem !important;
padding-left: 1.5rem !important;
color: white !important;
text-decoration: none;
}
.nav-link-type-three:hover{
text-decoration: none;
}
.nav-link-type-three::after, li.show .nav-link-type-three::after{
right: -7px;
color: #fff;
font-size: 17px;
top: 1px;
font-family: FontAwesome;
content: "\f0d7";
position: relative;
}
.nav-link-type-three::after, li.show .nav-link-type-three::after{
content: "\f0d7";
}
li.show .nav-link-type-three::after{
content: "\f0d8";
color: #232323;
}
.navbar-dark .navbar-nav .show>.nav-link-type-three {
color: #232323 !important;
text-decoration: none
}
.bg-dark-type-three {
background-color: #29a4d0 !important;
}
/* Default image size */
img {
max-width: 40px;
min-height: 40px;
}
/* images space */
.col-md-2 {
margin-left: 2%;
}<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Hello, world!</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark-type-three">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item dropdown nav-org">
<a class="nav-link-type-three nav-org " type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
LAPTOP
</a>
<div class="dropdown-menu dropdown-menu-one" aria-labelledby="navbarDropdownMenuLink">
<div class="row">
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="https://ssl-product-images.www8-hp.com/digmedialib/prodimg/lowres/c05962448.png" alt="">
</div>
<h6> lg </h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="https://images.idgesg.net/images/article/2017/11/bestbuylenovolaptop-100742402-large.jpg"
alt="">
</div>
<h6> sony </h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="https://www.lenovo.com/medias/lenovo-laptop-legion-y520-15-front.png?context=bWFzdGVyfGltYWdlc3wyNzI1M3xpbWFnZS9wbmd8aW1hZ2VzL2hiMS9oMDQvOTQxMjY3NTUwMjExMC5wbmd8YjYxMzUxYzUwZDcyNmEyYjJmN2Y1MmQyZTAxYmI4NmY5Yjg4N2Y0ZjIxMWI0YzYyMTM3YTBiZmMyYjZjZGY4Ng"
alt="">
</div>
<h6> acer</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src=" https://brain-images-ssl.cdn.dixons.com/6/4/10180946/u_10180946.jpg" alt="">
</div>
<h6> dell</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="https://img-prod-cms-rt-microsoft-com.akamaized.net/cms/api/am/imageFileData/RE2ygZJ?ver=948e&q=90&m=6&h=623&w=767&b=%23FFFFFFFF&l=f&f=jpg&o=t&aim=true"
alt="">
</div>
<h6> HP </h6>
</div>
</a>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link-type-three " type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
SPEAKERS
</a>
<div class="dropdown-menu dropdown-menu-second" aria-labelledby="navbarDropdownMenuLink">
<div class="row">
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ6UE4aUUdaU7m5yO4lG6YvjbAcjRM0sCD5BmzP1PInJ3KcgWwB"
alt="">
</div>
<h6>Mono </h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="https://images-na.ssl-images-amazon.com/images/I/71obbdaLHpL._SX425_.jpg" alt="">
</div>
<h6>jass </h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="https://images.philips.com/is/image/PhilipsConsumer/SPA25A_94-_FP-global-001?$jpglarge$&wid=1250"
alt="">
</div>
<h6>iBall </h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="http://www.litheaudio.com/user/products/large/Lithe%20Audio/Bluetooth%20ceiling%20speakers/Bluetooth%20speaker%20images_0034_01565_Lithe%20Audio%20Bluetooth%20IP%20Rated%20Bathroom%20Ceiling%20speaker_Cutout[1].jpg"
alt="">
</div>
<h6>Zebronics </h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="https://n3.sdlcdn.com/imgs/e/b/6/QHM602_USB_Mini_Speaker_03332-5c47e.jpg" alt="">
</div>
<h6>Senizer </h6>
</div>
</a>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link-type-three" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
MOBILES
</a>
<div class="dropdown-menu dropdown-menu-third " aria-labelledby="navbarDropdownMenuLink">
<div class="row">
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="https://www.91-img.com/pictures/97744-v1-apple-iphone-7-mobile-phone-large-1.jpg" alt="">
</div>
<h6> iphone 7</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center ">
<div>
<img src="https://www.gofordigitalindia.com/components/com_djclassifieds/images/item/5/5167_mobile_thb.jpg"
alt="">
</div>
<h6>samsung </h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="https://static.toiimg.com/photo/64792032/Motorola-One.jpg" alt="">
</div>
<h6> Motorola </h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="https://www.emibaba.com/wp-content/uploads/2017/09/Apple-iPhone-8-64gb-Red.png" alt="">
</div>
<h6> iphone 6s</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="http://www.infocusindia.co.in/mobile-phones/img/turbo5.png" alt="">
</div>
<h6>redmi </h6>
</div>
</a>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link-type-three" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
CAMARA
</a>
<div class="dropdown-menu dropdown-menu-four" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link-type-three" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
DESKTOP
</a>
<div class="dropdown-menu dropdown-menu-five" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link-type-three" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
REFURBISHED
</a>
<div class="dropdown-menu dropdown-menu-six" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link-type-three" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
ACCESSORIES
</a>
<div class="dropdown-menu dropdown-menu-seven" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link-type-three" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
MOTHERBOARD
</a>
<div class="dropdown-menu dropdown-menu-eight" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
答案 0 :(得分：0)
这是您想做的事的一个示例Drop_Down_transition
.sub-menu-parent { position: relative; }
.sub-menu {
visibility: hidden; /* hides sub-menu */
opacity: 0;
position: absolute;
top: 100%;
left: 0;
width: 100%;
transform: translateY(-2em);
z-index: -1;
transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
}
.sub-menu-parent:focus .sub-menu,
.sub-menu-parent:focus-within .sub-menu,
.sub-menu-parent:hover .sub-menu {
visibility: visible; /* shows sub-menu */
opacity: 1;
z-index: 1;
transform: translateY(0%);
transition-delay: 0s, 0s, 0.3s; /* this removes the transition delay so the menu will be visible while the other styles transition */
}
/* presentational */
body { padding: 2%; font: 18px/1.4 sans-serif; }
nav a { color: #E00; display: block; padding: 0.5em 1em; text-decoration: none; }
nav a:hover { color: #F55; }
nav ul,
nav ul li { list-style-type: none; padding: 0; margin: 0; }
nav > ul { background: #EEE; text-align: center; }
nav > ul > li { display: inline-block; border-left: solid 1px #aaa; }
nav > ul > li:first-child { border-left: none; }
.sub-menu {
background: #DDD;
}<nav>
<ul>
<li class="sub-menu-parent" tab-index="0">
<a href="http://google.com">Menu Item 1</a>
<ul class="sub-menu">
<li><a href="#">Sub Item 1</a></li>
<li><a href="#">Sub Item 2</a></li>
<li><a href="#">Sub Item 3</a></li>
<li><a href="#">Sub Item 4</a></li>
</ul>
</li>
<li class="sub-menu-parent" tab-index="0">
<a href="#">Menu Item 2</a>
<ul class="sub-menu">
<li><a href="#">Sub Item 1</a></li>
<li><a href="#">Sub Item 2</a></li>
<li><a href="#">Sub Item 3</a></li>
<li><a href="#">Sub Item 4</a></li>
<li><a href="#">Sub Item 5</a></li>
<li><a href="#">Sub Item 6</a></li>
</ul>
</li>
<li class="sub-menu-parent" tab-index="0">
<a href="#">Menu Item 3</a>
<ul class="sub-menu">
<li><a href="#">Sub Item 1</a></li>
<li><a href="#">Sub Item 2</a></li>
</ul></li>
</ul>
</nav>
答案 1 :(得分：0)
只需在代码中添加媒体查询CSS。下拉动画从992px开始，您可以根据需要进行调整，也可以将默认的jquery.min更改为3.3.1以支持下拉动画。希望该解决方案对您有所帮助。
.nav-link-type-three {
padding-right: 2.5rem !important;
padding-left: 1.5rem !important;
color: white !important;
text-decoration: none;
}
.nav-link-type-three:hover {
text-decoration: none;
}
.nav-link-type-three::after,
li.show .nav-link-type-three::after {
right: -7px;
color: #fff;
font-size: 17px;
top: 1px;
font-family: FontAwesome;
content: "\f0d7";
position: relative;
}
.nav-link-type-three::after,
li.show .nav-link-type-three::after {
content: "\f0d7";
}
li.show .nav-link-type-three::after {
content: "\f0d8";
color: #232323;
}
.navbar-dark .navbar-nav .show>.nav-link-type-three {
color: #232323 !important;
text-decoration: none
}
.bg-dark-type-three {
background-color: #29a4d0 !important;
}
@media (min-width:992px) {
.navbar-nav .dropdown-menu.show {
display: block;
top: 100%;
visibility: visible;
}
.navbar-nav .dropdown-menu {
position: static;
float: none;
top: -150px;
visibility: visible;
}
.navbar-nav .dropdown-menu {
position: absolute;
top: -150px;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 10rem;
padding: .5rem 0;
margin: .125rem 0 0;
font-size: 1rem;
color: #212529;
text-align: left;
list-style: none;
background-color: #fff;
background-clip: padding-box;
border: 1px solid rgba(0,0,0,.15);
border-radius: .25rem;
transition: all 0.5s;
visibility: hidden;
display: block;
}
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark-type-three">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item dropdown nav-org">
<a class="nav-link-type-three nav-org " type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
LAPTOP
</a>
<div class="dropdown-menu dropdown-menu-one" aria-labelledby="navbarDropdownMenuLink">
<div class="row">
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="https://ssl-product-images.www8-hp.com/digmedialib/prodimg/lowres/c05962448.png" alt="">
</div>
<h6> lg </h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="https://images.idgesg.net/images/article/2017/11/bestbuylenovolaptop-100742402-large.jpg" alt="">
</div>
<h6> sony </h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="https://www.lenovo.com/medias/lenovo-laptop-legion-y520-15-front.png?context=bWFzdGVyfGltYWdlc3wyNzI1M3xpbWFnZS9wbmd8aW1hZ2VzL2hiMS9oMDQvOTQxMjY3NTUwMjExMC5wbmd8YjYxMzUxYzUwZDcyNmEyYjJmN2Y1MmQyZTAxYmI4NmY5Yjg4N2Y0ZjIxMWI0YzYyMTM3YTBiZmMyYjZjZGY4Ng" alt="">
</div>
<h6> acer</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src=" https://brain-images-ssl.cdn.dixons.com/6/4/10180946/u_10180946.jpg" alt="">
</div>
<h6> dell</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="https://img-prod-cms-rt-microsoft-com.akamaized.net/cms/api/am/imageFileData/RE2ygZJ?ver=948e&q=90&m=6&h=623&w=767&b=%23FFFFFFFF&l=f&f=jpg&o=t&aim=true" alt="">
</div>
<h6> HP </h6>
</div>
</a>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link-type-three " type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
SPEAKERS
</a>
<div class="dropdown-menu dropdown-menu-second" aria-labelledby="navbarDropdownMenuLink">
<div class="row">
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ6UE4aUUdaU7m5yO4lG6YvjbAcjRM0sCD5BmzP1PInJ3KcgWwB" alt="">
</div>
<h6>Mono </h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="https://images-na.ssl-images-amazon.com/images/I/71obbdaLHpL._SX425_.jpg" alt="">
</div>
<h6>jass </h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="https://images.philips.com/is/image/PhilipsConsumer/SPA25A_94-_FP-global-001?$jpglarge$&wid=1250" alt="">
</div>
<h6>iBall </h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="http://www.litheaudio.com/user/products/large/Lithe%20Audio/Bluetooth%20ceiling%20speakers/Bluetooth%20speaker%20images_0034_01565_Lithe%20Audio%20Bluetooth%20IP%20Rated%20Bathroom%20Ceiling%20speaker_Cutout[1].jpg" alt="">
</div>
<h6>Zebronics </h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="https://n3.sdlcdn.com/imgs/e/b/6/QHM602_USB_Mini_Speaker_03332-5c47e.jpg" alt="">
</div>
<h6>Senizer </h6>
</div>
</a>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link-type-three" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
MOBILES
</a>
<div class="dropdown-menu dropdown-menu-third " aria-labelledby="navbarDropdownMenuLink">
<div class="row">
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="https://www.91-img.com/pictures/97744-v1-apple-iphone-7-mobile-phone-large-1.jpg" alt="">
</div>
<h6> iphone 7</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center ">
<div>
<img src="https://www.gofordigitalindia.com/components/com_djclassifieds/images/item/5/5167_mobile_thb.jpg" alt="">
</div>
<h6>samsung </h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="https://static.toiimg.com/photo/64792032/Motorola-One.jpg" alt="">
</div>
<h6> Motorola </h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="https://www.emibaba.com/wp-content/uploads/2017/09/Apple-iPhone-8-64gb-Red.png" alt="">
</div>
<h6> iphone 6s</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-three-effect" href="#">
<div class="text-center">
<div>
<img src="http://www.infocusindia.co.in/mobile-phones/img/turbo5.png" alt="">
</div>
<h6>redmi </h6>
</div>
</a>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link-type-three" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
CAMARA
</a>
<div class="dropdown-menu dropdown-menu-four" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link-type-three" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
DESKTOP
</a>
<div class="dropdown-menu dropdown-menu-five" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link-type-three" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
REFURBISHED
</a>
<div class="dropdown-menu dropdown-menu-six" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link-type-three" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
ACCESSORIES
</a>
<div class="dropdown-menu dropdown-menu-seven" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link-type-three" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
MOTHERBOARD
</a>
<div class="dropdown-menu dropdown-menu-eight" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>