嗨我正在使用bootstrap 4我开发了菜单栏。在该菜单栏中，它具有LAPTOP，MOBILES，CAMERA等类别。当用户点击菜单时，它将显示基于该类别的产品。
我怀疑是我试图在LAPTOP中实现过渡效果。但首先我尝试了悬停效果它工作正常但是要求是当我点击菜单然后它只应显示具有过渡效果的产品。所以请告诉我如何实现它。
或者，而不是悬停我尝试焦点和检查，但它不起作用。
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
height:166px;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
position: absolute;
background-color: #f9f9f9;
min-width: 1600px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
transition: all 1s ease-in;
overflow:hidden;
height:0;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
height:166px;
}
.nav-link-type-one {
color: white !important;
text-decoration: none;
font-size: 26px;
width: 185px;
height: 51px;
text-align: center;
}
.nav-link-type-one:hover {
text-decoration: none;
}
.navbar-dark .navbar-nav .show>.nav-link-type-one {
color: #ec7f4a !important;
text-decoration: none
}
.bg-dark-type-one {
background-color: #232323 !important;
}
.nav-link-type-one {
position: relative;
}
.nav-link-type-one::after {
position: absolute;
top: 50%;
right: 0;
display: inline-block;
width: 10px;
height: 10px;
margin-right: -21px;
margin-top: -7%;
background-image: url('../../../../assets/icons/Path247.svg');
background-size: cover;
background-repeat: no-repeat;
transform: rotate(136deg);
content: '';
}
li.show .nav-link-type-one::after {
background-image: url('../../../../assets/icons/Path244.svg');
transform: rotate(226deg);
margin-top: -3%;
}
/* hover effect for 1 Dropdown */
.dropdown-hover-one-effect:hover {
outline: 2px solid #ec7f4a;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div >
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<nav *ngIf="bg_color == 'black' && color == 'orange' " class="navbar navbar-expand-lg navbar-dark bg-dark-type-one">
<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-one nav-org " type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
LAPTOP
</a>
<div class="dropdown-content" aria-labelledby="navbarDropdownMenuLink">
<div class="row">
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect dropdown-images" href="#">
<div class="text-center">
<div>
<img src="https://ssl-product-images.www8-hp.com/digmedialib/prodimg/lowres/c05962448.png" alt="">
<h6> HP</h6>
</div>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect dropdown-images" href="#">
<div class="text-center">
<div>
<img src="https://images.idgesg.net/images/article/2017/11/bestbuylenovolaptop-100742402-large.jpg">
<h6> Samsung</h6>
</div>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect" href="#">
<div class="text-center">
<div>
<img
src="https://www.lenovo.com/medias/lenovo-laptop-legion-y520-15-front.png?context=bWFzdGVyfGltYWdlc3wyNzI1M3xpbWFnZS9wbmd8aW1hZ2VzL2hiMS9oMDQvOTQxMjY3NTUwMjExMC5wbmd8YjYxMzUxYzUwZDcyNmEyYjJmN2Y1MmQyZTAxYmI4NmY5Yjg4N2Y0ZjIxMWI0YzYyMTM3YTBiZmMyYjZjZGY4Ng">
</div>
<h6> Sony</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-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> Acer</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-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> Lenovo</h6>
</div>
</a>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link-type-one " 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-one-effect dropdown-images" href="#">
<div class="text-center">
<div>
<img
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQUgsHZFrUhLko1Eyed-z_Pwwjg4FqiO9qnJ6uUnVGiqjWBNXlX"
alt="">
<h6> Jass</h6>
</div>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect dropdown-images" href="#">
<div class="text-center">
<div>
<img
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSeX49tLv6J6I6B77_eam9ZIKTMuTbv15AVJo_T1swI-Azx0xwN">
<h6> Samsung</h6>
</div>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect" href="#">
<div class="text-center">
<div>
<img
src="https://ae01.alicdn.com/kf/HTB1cNK.dPoIL1JjSZFyq6zFBpXal/Selfie-Mini-Bluetooth-Speaker-for-Phone-Portable-Wireless-Speaker-Sound-Bluetooth-Handsfree-Cute-Catoon-Rabbit-Cat.jpg_640x640.jpg">
</div>
<h6> Sony</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect" href="#">
<div class="text-center">
<div>
<img
src="https://image.made-in-china.com/43f34j00lmAEJKdLdwoq/LED-Bluetooth-Speaker-Portable-Wireless-Speakers-Musical-Audio-Hand-Free-Subwoofer-Loudspeakers-for-Phone-with-Mic-TF-USB-FM.jpg"
alt="">
</div>
<h6> senizer</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect" href="#">
<div class="text-center">
<div>
<img
src="https://cdn11.bigcommerce.com/s-um6op5fe4t/images/stencil/500x659/products/2419/1615/Wireless_Bluetooth_Mini_Speaker_with_led_light_blue2__61739.1499074394.jpg?c=2"
alt="">
</div>
<h6> skulcandy</h6>
</div>
</a>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link-type-one " 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-one-effect dropdown-images" href="#">
<div class="text-center">
<div>
<img
src="https://images.samsung.com/is/image/samsung/p5/global/mkt/unpacked201802/pcdpfs/smartphone-galaxy-star-type2.png?$ORIGIN_PNG$"
alt="">
<h6> samsung</h6>
</div>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect dropdown-images" href="#">
<div class="text-center">
<div>
<img src="https://teja10.kuikr.com/i5/20171228/VB201705171774173-ak_LWBP1579145809-1514461108.jpeg">
<h6> Huawei</h6>
</div>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect" href="#">
<div class="text-center">
<div>
<img
src="https://assets.mspcdn.net/t_c-desktop-normal,f_auto,q_auto,d_c:noimage.jpg/c/11918-55-1.jpg">
</div>
<h6> Sony</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect" href="#">
<div class="text-center">
<div>
<img
src="https://img.tatacliq.com/images/i3/252Wx374H/MP000000003623987_252Wx374H_20190111195404.jpeg"
alt="">
</div>
<h6> VIVO</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect" href="#">
<div class="text-center">
<div>
<img
src="https://4.imimg.com/data4/LL/LL/GLADMIN-/in-resources-8fda3511-a61f-4c26-a4a0-f2bd37049878-images-productimages-29679821-500x500.jpg"
alt="">
</div>
<h6> Iphone 6</h6>
</div>
</a>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link-type-one" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
CAMERA
</a>
<div class="dropdown-menu dropdown-menu-four" aria-labelledby="navbarDropdownMenuLink">
<div class="row">
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect dropdown-images" href="#">
<div class="text-center">
<div>
<img src="https://cdn.mos.cms.futurecdn.net/468c23968de175daa7458ece997663ac-320-80.jpg" alt="">
<h6> Sony</h6>
</div>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect dropdown-images" href="#">
<div class="text-center">
<div>
<img
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRGibGMgRaDelhbNeXcTkUlH1c4yvAtF9oRiM9hP5yjIxzSeP3fUA">
<h6> Nikon</h6>
</div>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect" href="#">
<div class="text-center">
<div>
<img
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQA51gnFEIgRWiIT3Y3Qi7gZSIYJ0e43c8x5uUKtVm8jv6Qx8xE">
</div>
<h6> lumix</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect" href="#">
<div class="text-center">
<div>
<img
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRunxpvSx04BfYa9J-axgB8c5BI6_lvzxRlYRzRfDS0-Bb6xM7q"
alt="">
</div>
<h6> Canon</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect" href="#">
<div class="text-center">
<div>
<img
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTPI0UfP9Cyn5EC9zKpi_JYduD0DARvGGe8k9ov__LeEQf12dpl"
alt="">
</div>
<h6> Winait</h6>
</div>
</a>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link-type-one" 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">
<div class="row">
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect dropdown-images" href="#">
<div class="text-center">
<div>
<img
src="https://media.hpshopping.in/catalog/product/cache/c58b88357feb47e1e90e0994b7c41391/4/1/41vrhct2ypl_3.jpg"
alt="">
<h6> HP</h6>
</div>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect dropdown-images" href="#">
<div class="text-center">
<div>
<img
src="https://media.hpshopping.in/catalog/product/cache/c58b88357feb47e1e90e0994b7c41391/4/E/4EB09AA-1_T1539236227.png">
<h6> Samsung</h6>
</div>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect" href="#">
<div class="text-center">
<div>
<img
src="https://rukminim1.flixcart.com/image/312/312/jm9hfgw0/allinone-desktop/n/q/w/lenovo-aio-520-22iku-original-imaf97e7bfu9cwjy.jpeg?q=70 ">
</div>
<h6> Sony</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect" href="#">
<div class="text-center">
<div>
<img src="https://ssl-product-images.www8-hp.com/digmedialib/prodimg/lowres/c05282390.png" alt="">
</div>
<h6> Acer</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect" href="#">
<div class="text-center">
<div>
<img
src="https://www.lenovo.com/medias/lenovo-thinkcentre-m710-tw-gallery1.jpg?context=bWFzdGVyfGltYWdlc3w0NTQ4MHxpbWFnZS9qcGVnfGltYWdlcy9oYWYvaDU4Lzk0MDU4OTI3NTU0ODYuanBnfDA2NTg4MTU2NDAyYmE0NmYxYzhhNDAxMWIzNjQzZjc2MDI5NjQ2NWZiNmJlOTcxNmQzYWM4MDIwYmZmZjEzNDc"
alt="">
</div>
<h6> Lenovo</h6>
</div>
</a>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link-type-one" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Pendrive
</a>
<div class="dropdown-menu dropdown-menu-six" aria-labelledby="navbarDropdownMenuLink">
<div class="row">
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect dropdown-images" href="#">
<div class="text-center">
<div>
<img
src="https://rukminim1.flixcart.com/image/704/704/pendrive/7/z/g/sandisk-cruzer-blade-16-gb-original-imad4dyumyqy3b4y.jpeg?q=70"
alt="">
<h6> sandisk</h6>
</div>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect dropdown-images" href="#">
<div class="text-center">
<div>
<img src="https://images-na.ssl-images-amazon.com/images/I/51bm1Ll%2BeNL._SX425_.jpg">
<h6> hp</h6>
</div>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect" href="#">
<div class="text-center">
<div>
<img src="http://img.fkcdn.com/image/pendrive/p/z/y/sony-usm64x-b-400x400-imaehyjcgqzkxjbu.jpeg">
</div>
<h6> Sony</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect" href="#">
<div class="text-center">
<div>
<img
src=" https://img.staticbg.com/thumb/large/oaupload/banggood/images/09/ED/db329437-4b26-4a19-9665-d9f191796397.jpg"
alt="">
</div>
<h6> eagit</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect" href="#">
<div class="text-center">
<div>
<img src="https://cdn.buysnip.com/IBALL-64GB-OTG-HYBRID-Pendrive-01.jpg" alt="">
</div>
<h6> iball</h6>
</div>
</a>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link-type-one" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
TABLET
</a>
<div class="dropdown-menu dropdown-menu-seven" aria-labelledby="navbarDropdownMenuLink">
<div class="row">
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect dropdown-images" href="#">
<div class="text-center">
<div>
<img
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR5PDfCILgeEMDtkdLPrgSVJNBlbMIfPZA_88m2bfMKZ6dzuB5BiQ"
alt="">
<h6> HP</h6>
</div>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect dropdown-images" href="#">
<div class="text-center">
<div>
<img
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTnuE-NXyW0xl9Xy4sxNl0myPommcDqPDvF5B2SMGQ-e6PlwmSQ">
<h6> Samsung</h6>
</div>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect" href="#">
<div class="text-center">
<div>
<img
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTii2lqE4xqlxqwu3rA2ymwZI_To_xq3MOpBJ2dQt9LSaHvXav1">
</div>
<h6> Sony</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect" href="#">
<div class="text-center">
<div>
<img
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQpXQH2sSOatJ8mOemEI2OBvhHBzDcu8CkHLWDB_Ksp2dvTwvU7xQ"
alt="">
</div>
<h6> Acer</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect" href="#">
<div class="text-center">
<div>
<img
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQRScLPakgoPm_--CwGtjrhFFr0Mn93005H2Qjfz9TI9LmIiz-o"
alt="">
</div>
<h6> Lenovo</h6>
</div>
</a>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link-type-one" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
HEADSET
</a>
<div class="dropdown-menu dropdown-menu-eight" aria-labelledby="navbarDropdownMenuLink">
<div class="row">
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect dropdown-images" href="#">
<div class="text-center">
<div>
<img src="https://multimedia.bbycastatic.ca/multimedia/products/500x500/118/11800/11800872.jpg"
alt="">
<h6> HP</h6>
</div>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect dropdown-images" href="#">
<div class="text-center">
<div>
<img
src="https://www.astrogaming.com/dw/image/v2/AALZ_PRD/on/demandware.static/-/Sites-masterCatalog_AstroGaming_RP/default/dwd035ce5e/product-images/A10-939-001706-Zelda-left-micup.png?sw=720&sh=720&sm=fit">
<h6> Samsung</h6>
</div>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect" href="#">
<div class="text-center">
<div>
<img
src="https://target.scene7.com/is/image/Target/GUEST_d50fce48-336a-4979-9423-4c8a2d8ba0f4?wid=488&hei=488&fmt=pjpeg">
</div>
<h6> Sony</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-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> Acer</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect" href="#">
<div class="text-center">
<div>
<img
src="https://www.lenovo.com/medias/GXD0L03745-main-v1.png?context=bWFzdGVyfHJvb3R8NDY2MzM0fGltYWdlL3BuZ3xoMTQvaDA1Lzk0ODgzOTYxNTY5NTgucG5nfDNhOGQ3MGQ1M2QyNDlkOWY5MGUxZjgxZWE2NGIxZjYzZjQxMjFiZGY2N2ZlODA2NjE0OGJlZjI0NjFiZTY4NTk"
alt="">
</div>
<h6> Lenovo</h6>
</div>
</a>
</div>
</div>
</div>
</li>
</ul>
</div>
</nav>
<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>您可以使用bootstrap collapse而不是下拉菜单，因为这会带来转换。 https://getbootstrap.com/docs/4.0/components/collapse/
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
position: absolute;
background-color: #f9f9f9;
min-width: 1600px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
transition: all 1s ease-in;
overflow: hidden;
height: 0;
}
.nav-link-type-one {
color: white !important;
text-decoration: none;
font-size: 26px;
width: 185px;
height: 51px;
text-align: center;
}
.nav-link-type-one:hover {
text-decoration: none;
}
.navbar-dark .navbar-nav .show>.nav-link-type-one {
color: #ec7f4a !important;
text-decoration: none
}
.bg-dark-type-one {
background-color: #232323 !important;
}
.nav-link-type-one {
position: relative;
}
.nav-link-type-one::after {
position: absolute;
top: 50%;
right: 0;
display: inline-block;
width: 10px;
height: 10px;
margin-right: -21px;
margin-top: -7%;
background-image: url('../../../../assets/icons/Path247.svg');
background-size: cover;
background-repeat: no-repeat;
transform: rotate(136deg);
content: '';
}
li.show .nav-link-type-one::after {
background-image: url('../../../../assets/icons/Path244.svg');
transform: rotate(226deg);
margin-top: -3%;
}
/* hover effect for 1 Dropdown */
.dropdown-hover-one-effect:hover {
outline: 2px solid #ec7f4a;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<nav *ngIf="bg_color == 'black' && color == 'orange' " class="navbar navbar-expand-lg navbar-dark bg-dark-type-one">
<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-one nav-org " type="btn" href="#collapseExample" id="navbarDropdownMenuLink" data-toggle="collapse" aria-haspopup="true" aria-expanded="false">
LAPTOP
</a>
<div class="collapse" id="collapseExample" aria-labelledby="navbarDropdownMenuLink">
<div class="row">
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect dropdown-images" href="#">
<div class="text-center">
<div>
<img src="https://ssl-product-images.www8-hp.com/digmedialib/prodimg/lowres/c05962448.png" alt="">
<h6> HP</h6>
</div>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect dropdown-images" href="#">
<div class="text-center">
<div>
<img src="https://images.idgesg.net/images/article/2017/11/bestbuylenovolaptop-100742402-large.jpg">
<h6> Samsung</h6>
</div>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect" href="#">
<div class="text-center">
<div>
<img src="https://www.lenovo.com/medias/lenovo-laptop-legion-y520-15-front.png?context=bWFzdGVyfGltYWdlc3wyNzI1M3xpbWFnZS9wbmd8aW1hZ2VzL2hiMS9oMDQvOTQxMjY3NTUwMjExMC5wbmd8YjYxMzUxYzUwZDcyNmEyYjJmN2Y1MmQyZTAxYmI4NmY5Yjg4N2Y0ZjIxMWI0YzYyMTM3YTBiZmMyYjZjZGY4Ng">
</div>
<h6> Sony</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-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> Acer</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-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> Lenovo</h6>
</div>
</a>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link-type-one " 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-one-effect dropdown-images" href="#">
<div class="text-center">
<div>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQUgsHZFrUhLko1Eyed-z_Pwwjg4FqiO9qnJ6uUnVGiqjWBNXlX" alt="">
<h6> Jass</h6>
</div>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect dropdown-images" href="#">
<div class="text-center">
<div>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSeX49tLv6J6I6B77_eam9ZIKTMuTbv15AVJo_T1swI-Azx0xwN">
<h6> Samsung</h6>
</div>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect" href="#">
<div class="text-center">
<div>
<img src="https://ae01.alicdn.com/kf/HTB1cNK.dPoIL1JjSZFyq6zFBpXal/Selfie-Mini-Bluetooth-Speaker-for-Phone-Portable-Wireless-Speaker-Sound-Bluetooth-Handsfree-Cute-Catoon-Rabbit-Cat.jpg_640x640.jpg">
</div>
<h6> Sony</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect" href="#">
<div class="text-center">
<div>
<img src="https://image.made-in-china.com/43f34j00lmAEJKdLdwoq/LED-Bluetooth-Speaker-Portable-Wireless-Speakers-Musical-Audio-Hand-Free-Subwoofer-Loudspeakers-for-Phone-with-Mic-TF-USB-FM.jpg" alt="">
</div>
<h6> senizer</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect" href="#">
<div class="text-center">
<div>
<img src="https://cdn11.bigcommerce.com/s-um6op5fe4t/images/stencil/500x659/products/2419/1615/Wireless_Bluetooth_Mini_Speaker_with_led_light_blue2__61739.1499074394.jpg?c=2" alt="">
</div>
<h6> skulcandy</h6>
</div>
</a>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link-type-one " 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-one-effect dropdown-images" href="#">
<div class="text-center">
<div>
<img src="https://images.samsung.com/is/image/samsung/p5/global/mkt/unpacked201802/pcdpfs/smartphone-galaxy-star-type2.png?$ORIGIN_PNG$" alt="">
<h6> samsung</h6>
</div>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect dropdown-images" href="#">
<div class="text-center">
<div>
<img src="https://teja10.kuikr.com/i5/20171228/VB201705171774173-ak_LWBP1579145809-1514461108.jpeg">
<h6> Huawei</h6>
</div>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect" href="#">
<div class="text-center">
<div>
<img src="https://assets.mspcdn.net/t_c-desktop-normal,f_auto,q_auto,d_c:noimage.jpg/c/11918-55-1.jpg">
</div>
<h6> Sony</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect" href="#">
<div class="text-center">
<div>
<img src="https://img.tatacliq.com/images/i3/252Wx374H/MP000000003623987_252Wx374H_20190111195404.jpeg" alt="">
</div>
<h6> VIVO</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect" href="#">
<div class="text-center">
<div>
<img src="https://4.imimg.com/data4/LL/LL/GLADMIN-/in-resources-8fda3511-a61f-4c26-a4a0-f2bd37049878-images-productimages-29679821-500x500.jpg" alt="">
</div>
<h6> Iphone 6</h6>
</div>
</a>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link-type-one" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
CAMERA
</a>
<div class="dropdown-menu dropdown-menu-four" aria-labelledby="navbarDropdownMenuLink">
<div class="row">
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect dropdown-images" href="#">
<div class="text-center">
<div>
<img src="https://cdn.mos.cms.futurecdn.net/468c23968de175daa7458ece997663ac-320-80.jpg" alt="">
<h6> Sony</h6>
</div>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect dropdown-images" href="#">
<div class="text-center">
<div>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRGibGMgRaDelhbNeXcTkUlH1c4yvAtF9oRiM9hP5yjIxzSeP3fUA">
<h6> Nikon</h6>
</div>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect" href="#">
<div class="text-center">
<div>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQA51gnFEIgRWiIT3Y3Qi7gZSIYJ0e43c8x5uUKtVm8jv6Qx8xE">
</div>
<h6> lumix</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect" href="#">
<div class="text-center">
<div>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRunxpvSx04BfYa9J-axgB8c5BI6_lvzxRlYRzRfDS0-Bb6xM7q" alt="">
</div>
<h6> Canon</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect" href="#">
<div class="text-center">
<div>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTPI0UfP9Cyn5EC9zKpi_JYduD0DARvGGe8k9ov__LeEQf12dpl" alt="">
</div>
<h6> Winait</h6>
</div>
</a>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link-type-one" 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">
<div class="row">
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect dropdown-images" href="#">
<div class="text-center">
<div>
<img src="https://media.hpshopping.in/catalog/product/cache/c58b88357feb47e1e90e0994b7c41391/4/1/41vrhct2ypl_3.jpg" alt="">
<h6> HP</h6>
</div>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect dropdown-images" href="#">
<div class="text-center">
<div>
<img src="https://media.hpshopping.in/catalog/product/cache/c58b88357feb47e1e90e0994b7c41391/4/E/4EB09AA-1_T1539236227.png">
<h6> Samsung</h6>
</div>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect" href="#">
<div class="text-center">
<div>
<img src="https://rukminim1.flixcart.com/image/312/312/jm9hfgw0/allinone-desktop/n/q/w/lenovo-aio-520-22iku-original-imaf97e7bfu9cwjy.jpeg?q=70 ">
</div>
<h6> Sony</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect" href="#">
<div class="text-center">
<div>
<img src="https://ssl-product-images.www8-hp.com/digmedialib/prodimg/lowres/c05282390.png" alt="">
</div>
<h6> Acer</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect" href="#">
<div class="text-center">
<div>
<img src="https://www.lenovo.com/medias/lenovo-thinkcentre-m710-tw-gallery1.jpg?context=bWFzdGVyfGltYWdlc3w0NTQ4MHxpbWFnZS9qcGVnfGltYWdlcy9oYWYvaDU4Lzk0MDU4OTI3NTU0ODYuanBnfDA2NTg4MTU2NDAyYmE0NmYxYzhhNDAxMWIzNjQzZjc2MDI5NjQ2NWZiNmJlOTcxNmQzYWM4MDIwYmZmZjEzNDc"
alt="">
</div>
<h6> Lenovo</h6>
</div>
</a>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link-type-one" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Pendrive
</a>
<div class="dropdown-menu dropdown-menu-six" aria-labelledby="navbarDropdownMenuLink">
<div class="row">
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect dropdown-images" href="#">
<div class="text-center">
<div>
<img src="https://rukminim1.flixcart.com/image/704/704/pendrive/7/z/g/sandisk-cruzer-blade-16-gb-original-imad4dyumyqy3b4y.jpeg?q=70" alt="">
<h6> sandisk</h6>
</div>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect dropdown-images" href="#">
<div class="text-center">
<div>
<img src="https://images-na.ssl-images-amazon.com/images/I/51bm1Ll%2BeNL._SX425_.jpg">
<h6> hp</h6>
</div>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect" href="#">
<div class="text-center">
<div>
<img src="http://img.fkcdn.com/image/pendrive/p/z/y/sony-usm64x-b-400x400-imaehyjcgqzkxjbu.jpeg">
</div>
<h6> Sony</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect" href="#">
<div class="text-center">
<div>
<img src=" https://img.staticbg.com/thumb/large/oaupload/banggood/images/09/ED/db329437-4b26-4a19-9665-d9f191796397.jpg" alt="">
</div>
<h6> eagit</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect" href="#">
<div class="text-center">
<div>
<img src="https://cdn.buysnip.com/IBALL-64GB-OTG-HYBRID-Pendrive-01.jpg" alt="">
</div>
<h6> iball</h6>
</div>
</a>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link-type-one" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
TABLET
</a>
<div class="dropdown-menu dropdown-menu-seven" aria-labelledby="navbarDropdownMenuLink">
<div class="row">
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect dropdown-images" href="#">
<div class="text-center">
<div>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR5PDfCILgeEMDtkdLPrgSVJNBlbMIfPZA_88m2bfMKZ6dzuB5BiQ" alt="">
<h6> HP</h6>
</div>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect dropdown-images" href="#">
<div class="text-center">
<div>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTnuE-NXyW0xl9Xy4sxNl0myPommcDqPDvF5B2SMGQ-e6PlwmSQ">
<h6> Samsung</h6>
</div>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect" href="#">
<div class="text-center">
<div>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTii2lqE4xqlxqwu3rA2ymwZI_To_xq3MOpBJ2dQt9LSaHvXav1">
</div>
<h6> Sony</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect" href="#">
<div class="text-center">
<div>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQpXQH2sSOatJ8mOemEI2OBvhHBzDcu8CkHLWDB_Ksp2dvTwvU7xQ" alt="">
</div>
<h6> Acer</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect" href="#">
<div class="text-center">
<div>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQRScLPakgoPm_--CwGtjrhFFr0Mn93005H2Qjfz9TI9LmIiz-o" alt="">
</div>
<h6> Lenovo</h6>
</div>
</a>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link-type-one" type="btn" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
HEADSET
</a>
<div class="dropdown-menu dropdown-menu-eight" aria-labelledby="navbarDropdownMenuLink">
<div class="row">
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect dropdown-images" href="#">
<div class="text-center">
<div>
<img src="https://multimedia.bbycastatic.ca/multimedia/products/500x500/118/11800/11800872.jpg" alt="">
<h6> HP</h6>
</div>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect dropdown-images" href="#">
<div class="text-center">
<div>
<img src="https://www.astrogaming.com/dw/image/v2/AALZ_PRD/on/demandware.static/-/Sites-masterCatalog_AstroGaming_RP/default/dwd035ce5e/product-images/A10-939-001706-Zelda-left-micup.png?sw=720&sh=720&sm=fit">
<h6> Samsung</h6>
</div>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect" href="#">
<div class="text-center">
<div>
<img src="https://target.scene7.com/is/image/Target/GUEST_d50fce48-336a-4979-9423-4c8a2d8ba0f4?wid=488&hei=488&fmt=pjpeg">
</div>
<h6> Sony</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-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> Acer</h6>
</div>
</a>
</div>
<div class="col-md-2">
<a class="dropdown-item dropdown-hover-one-effect" href="#">
<div class="text-center">
<div>
<img src="https://www.lenovo.com/medias/GXD0L03745-main-v1.png?context=bWFzdGVyfHJvb3R8NDY2MzM0fGltYWdlL3BuZ3xoMTQvaDA1Lzk0ODgzOTYxNTY5NTgucG5nfDNhOGQ3MGQ1M2QyNDlkOWY5MGUxZjgxZWE2NGIxZjYzZjQxMjFiZGY2N2ZlODA2NjE0OGJlZjI0NjFiZTY4NTk" alt="">
</div>
<h6> Lenovo</h6>
</div>
</a>
</div>
</div>
</div>
</li>
</ul>
</div>
</nav>
<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>