当我单击下拉菜单的元素父元素时,单击下面的一个子元素

时间:2016-06-10 13:56:46

标签: html css drop-down-menu twitter-bootstrap-3 prestashop

当我点击下拉菜单上的父元素时,后者点击他的孩子。

我不知道问题所在,但您可以点击以下链接找到它,并使用检查员将视口切换到移动设备: www.backlabel.com

点击"收藏"然后点击" Fabric",选择孩子" Eucalyptus"他的父母" Fabric"。

HTML

<!--HERE THE COLLECTIONS-->
<div id="megamenu" class="vel-megamenu clearfix vel-megamenu-active">
<ul class="nav navbar-nav  menu level1">
<li class="item  parent group"><a href="#" title="COLLECTIONS">COLLECTIONS</a>
<div class="dropdown-menu">
<ul>
<li class="item  group"><a href="http://www.backlabel.com/47-forward" title="Forward">Forward</a></li>
<li class="item  group"><a href="http://www.backlabel.com/48-dreamy" title="Dreamy">Dreamy</a></li>
<li class="item  group"><a href="http://www.backlabel.com/46-nourishing-essentials" title="Nourishing Essentials">Nourishing Essentials</a></li>
</ul>
</div>
</li>



<!--HERE THE FABRICS-->

<li class="item  parent group"><a href="#" title="FABRICS">FABRICS</a><div class="dropdown-menu"><ul><li class="item  group"><a href="http://www.backlabel.com/content/11-fabrics" title="View All">View All</a></li>
<li class="item  parent group"><a href="http://www.backlabel.com/46-nourishing-essentials" title="Nourishing Essentials">Nourishing Essentials</a>
<div class="dropdown-menu">
<ul>
<li class="item  group"><a href="http://www.backlabel.com/21-bamboo-silk-fibre" title="Bamboo &amp; Silk Fibre">Bamboo &amp; Silk Fibre</a></li>
<li class="item  group"><a href="http://www.backlabel.com/24-eucalyptus" title="Eucalyptus Fibre">Eucalyptus Fibre</a></li>
<li class="item  group"><a href="http://www.backlabel.com/25-milk-protein-fibre" title="Milk Protein Fibre">Milk Protein Fibre</a></li>
<li class="item  group"><a href="http://www.backlabel.com/content/11-fabrics#seaweed" title="Seaweed FIbre">Seaweed FIbre</a></li>
<li class="item  group"><a href="http://www.backlabel.com/59-sea-island-fibre" title="Sea Island Fibre">Sea Island Fibre</a></li>
<li class="item  group"><a href="http://www.backlabel.com/content/11-fabrics#organic-cotton" title="Organic Cotton Fibre">Organic Cotton Fibre</a></li>
<li class="item  group"><a href="http://www.backlabel.com/content/11-fabrics#egyptian-cotton" title="Egyptian Cotton Fibre">Egyptian Cotton Fibre</a></li>
</ul>
</div>
</li>
<li class="item  parent group"><a href="http://www.backlabel.com/48-dreamy" title="Dreamy">Dreamy</a>
<div class="dropdown-menu">
<ul>
<li class="item  group"><a href="http://www.backlabel.com/content/11-fabrics#belize-cotton-cashmere" title="Belize Cotton &amp; Cashmere">Belize Cotton &amp; Cashmere</a></li>
<li class="item  group"><a href="http://www.backlabel.com/content/11-fabrics#jaipur-cashmere" title="Jaipur Cashmere">Jaipur Cashmere</a></li>
<li class="item  group"><a href="http://www.backlabel.com/content/11-fabrics#cashmere" title="Cariaggi Cashmere">Cariaggi Cashmere</a></li>
</ul>
</div>
</li>
<li class="item  parent group"><a href="http://www.backlabel.com/47-forward" title="Forward">Forward</a><div class="dropdown-menu">
<ul>
<li class="item  group"><a href="http://www.backlabel.com/86-performance-cotton" title="Performance Cotton">Performance Cotton</a></li>
<li class="item  group"><a href="http://www.backlabel.com/58-japanese-fleece" title="Japanese Fleece">Japanese Fleece</a></li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>

CSS

.vel-megamenu .menu {
float: inherit!Important;
}

.navbar-nav {
margin: 10.25px -10px;
}

.nav {
margin-bottom: 0;
padding-left: 0;
list-style: none;
}

.vel-megamenu .navbar-nav li {
float: none;
clear: both;
position: relative !important;
border: solid 2px;
}

.vel-megamenu .nav > li {
position: initial;
}

.nav > li {
position: relative;
display: block; 
}

.header2 #vel-megamenu #megamenu {
display: inline-block;
}


.vel-megamenu-active {
visibility: visible;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
background-color: #474747;
}

.vel-megamenu {
position: fixed;
top: 0px;
left: 0;
background-color: #fff;
bottom: 0px;
/* width: 280px; */
width: 333px;
padding: 10px;
z-index: 999999;
overflow-x: hidden;
overflow-y: auto;
visibility: hidden;
-webkit-transform: translate3d(-280px, 0, 0);
transform: translate3d(-280px, 0, 0);
-webkit-transition: all 0.5s ease-in-out 0s;
transition: all 0.5s ease-in-out 0s;

0 个答案:

没有答案
相关问题