tomlis20Hello,
I am in the middle of building website and this problem just surprised me because I have never had to deal with such an issue.
I have installed plugin called Smooth Content which applies to a website Content Slider written in jQuery of course. Above that I have a pure CSS dropdown menu which sub-menu UL list covers Content Slider.
The problem is when you go with your cursor on any of submenus which are on the same level as container is it loses it's focus and it disappears because it seems like jQuery is OVER the menu list. Do you know how to fix it? Any hack? Any CSS error I have made?
For best explanation I attach screenshot. I am sure it will be helpful.
[URL=http://imageshack.us/photo/my-images/192/problemym.png/][IMG]http://img192.imageshack.us/img192/3412/problemym.th.png[/IMG][/URL]
my menu html code:
<ul class="horMenu">
<li><a href="#">HOME</a></li>
<li><a href="#">WHY US</a>
<ul>
<li><a href="">Our Approach</a></li>
<li><a href="">Our Partners</a></li>
<li><a href="">Speakers</a></li>
</ul>
</li>
<li><a href="#">EVENTS</a>
<ul>
<li><a href="">Discover Trading</a></li>
<li><a href="">Webinars</a></li>
<li><a href="">Intensive Course</a></li>
</ul>
</li>
<li><a href="#">FAQ</a></li>
<li><a href="#">CONTACT</a></li>
</ul>my style.css file:
.horMenu li{
float:left;
position:relative;
width: 113px;
line-height: 41px;
float: left;
font-size: 14px;
background: #029bce;
margin-right: 1px;
text-align: center;
font-weight: bold;
}
.horMenu li a { padding: 0px 8px 0px 8px; }
.horMenu a{
display:block;
color:#fff;
text-decoration:none;
font-size: 11px;
}
.horMenu a:hover{
color:#fff;
}
.horMenu ul{
background:#fff;
background:rgba(255,255,255,0);
list-style:none;
position:absolute;
left:-9999px;
}
.horMenu ul li{
float:none;
background: #fff;
border-bottom: 1px dashed #d8d8d8;
font-weight: normal !important;
}
.horMenu ul a{
white-space:nowrap;
}
.horMenu li:hover ul{
left:0;
}
.horMenu li:hover a{
color: #000;
background: url('images/horMenuHover.png');
height: 41px;
border-bottom: 1px dashed #d8d8d8;
}
.horMenu li:hover ul a{
text-decoration:none;
background: #fff;
text-align: left;
color: #6c6d6f;
border: 0 !important;
}
.horMenu li:hover ul li a:hover{
background: #d8d8d8;
}
