I am trying to create dropdown menu for WordPress theme and having some silly issue which not able to solve since more than 3 hours I have tried to fix.
Things are going fine except when I hover on second level dropdown list parent (1st dropdown) highlight with main parent highlight class.
Also I want any jquery script which can be implemented with my existing css and wordpress menu where arrow on parent link will automatic appear while having sub-menu. And fade in effect if possible but not much concern for that.
Please find attached image to get some visual reference of the issue.
Also posting css and html code (html copying from source as can’t get from wordpress)
/*Nav */
#main-nav{
background-color: #333333;
border-bottom: 1px solid #444444;
border-top: 1px solid #383838;
box-shadow: 0 2px 0 0 #262626, 0 -1px 0 0 #171717;
display: block;
margin-bottom: 1px;
min-width: 960px;
z-index: 3100
}
#main-nav #nav-group{
width:960px;
margin:0 auto;
}
#main-nav #nav-group .main-menu-cont{
float:left;
}
#main-nav li{
display: inline-block;
float: left;
line-height: 18px;
position: relative;
z-index: 5000;
padding-bottom:6px;
}
#main-nav a {
border-bottom: 1px solid transparent;
color: #C5C5C5;
display: inline-block;
font-size: 13px;
line-height: 18px;
margin-top: 12px;
padding: 6px 10px 8px;
position: relative;
text-shadow: 0 0 0 transparent, 0 1px rgba(29, 29, 29, 0.2);
top: -1px
}
/* Nav Links*/
#main-nav a:link,#main-nav a:visited {
}
#main-nav li:hover > a,#main-nav a:active,#main-nav a:focus,#main-nav .current_page_parent > a,#main-nav .current_page_item > a {
background: #d0441b;
border-bottom: 1px solid #4D0000;
color: #FFFFFF;
text-decoration: none;
}
#main-nav li ul{
background-color: #FFFFFF;
border-bottom: 1px solid rgba(35, 35, 35, 0.2);
display: none;
left: 0;
padding: 6px 15px;
position: absolute;
top: 44px;
width: 150px;
z-index: 9999;
box-shadow: 4px 4px 2px 0 rgba(35, 35, 35, 0.1);
}
#main-nav li:hover ul{
display:block;
}
#main-nav li li{
display: block;
width: 150px;
font-size: inherit;
line-height: 24px;
margin: 0;
padding: 0;
z-index: auto;
position:relative;
}
#main-nav li li a{
display:block;
background:none;
color:#7E7E7E;
padding:3px 0;
margin:0;
width:150px;
border:none;
text-shadow:none;
}
#main-nav li li a:hover{
background: none repeat scroll 0 0 transparent;
color: #232323;
border:none;
display:block;
}
#main-nav li li ul{
background-color: #FFFFFF;
border-bottom: 1px solid rgba(35, 35, 35, 0.2);
box-shadow: 4px 4px 0 0 rgba(35, 35, 35, 0.1);
display: none !important;
left: 145px;
padding: 6px 15px;
position: absolute;
top: -1px;
width: 150px;
z-index: 9999;
}
#main-nav li li:hover ul{
display:block !important;
}
#main-nav li > a > li:hover > a{
background:#fff !important;
}
/* DownStates*/
#main-nav li > .sub-menu > .current_page_item a {
background:none !important;
color:#BC3415 !important;
cursor:default;
border:none;
}
Here is html code
<nav role="navigation" class="horiz-list clearfix" id="main-nav">
<div class="clearfix" id="nav-group">
<div class="main-menu-cont">
<ul class="clearfix">
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-85" id="menu-item-85">
<a href="http://localhost/mediatuts/">Home</a>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-51 current_page_item menu-item-86" id="menu-item-86">
<a href="http://localhost/mediatuts/about/">About</a>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-87" id="menu-item-87">
<a href="http://localhost/mediatuts/contact-us/">Contact Us</a>
<ul class="sub-menu">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-88" id="menu-item-88">
<a href="http://localhost/mediatuts/contact-us/our-location/">Our Location</a>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-89" id="menu-item-89">
<a href="http://localhost/mediatuts/links/">Links</a>
</li>
</ul>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-90" id="menu-item-90">
<a href="http://localhost/mediatuts/news/">News</a>
<ul class="sub-menu">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-91" id="menu-item-91">
<a href="http://localhost/mediatuts/news/company-history/">History</a>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-92" id="menu-item-92">
<a href="http://localhost/mediatuts/news/our-company/">Our Company</a>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-93" id="menu-item-93">
<a href="http://localhost/mediatuts/news/our-staff/">Our Staff</a>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-94" id="menu-item-94">
<a href="http://localhost/mediatuts/news/our-staff/employment-opportunities/">Employment Opportunities</a>
<ul class="sub-menu">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-95" id="menu-item-95">
<a href="http://localhost/mediatuts/sample-page/">Sample Page</a>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-96" id="menu-item-96">
<a href="http://localhost/mediatuts/support/">Support</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-97" id="menu-item-97">
<a href="#">Sub1</a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-98" id="menu-item-98">
<a href="#">Sub2</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div>
</div>
</div>
</nav>
Try using this rule:
}
instead of this:
}
Check the jsfiddle