I would like to have the ul ul sub menu have the ability to hover over each link; not just the first link on the list. I’m not sure where the problem is (i.e w/ my coding or missing a critical code).
HTML Code:
<div align="left"> <div align="left"> <div align="left"><div class="menu-main-menu-container"><ul id="menu-main-menu" class="menu"><li id="menu-item-825" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-825"><a href="#">About Us</a>
<ul class="sub-menu">
<li id="menu-item-397" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-397"><a href="http://www.itstelecom.com/NewSite/index.php/about-us/corporate-overview/">Corporate Overview</a></li>
<li id="menu-item-396" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-396"><a href="http://www.itstelecom.com/NewSite/index.php/about-us/customer-testimonial/">Customer Testimonial</a></li>
<li id="menu-item-395" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-395"><a href="http://www.itstelecom.com/NewSite/index.php/about-us/press-room/">Press Room</a></li>
</ul>
</li>
<li id="menu-item-826" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-826"><a href="#">Products & Services</a>
<ul class="sub-menu">
<li id="menu-item-658" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-658"><a href="http://www.itstelecom.com/NewSite/index.php/products-services/voice/">Voice</a>
<ul class="sub-menu">
<li id="menu-item-2230" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2230"><a href="http://#">VoIP</a></li>
<li id="menu-item-2231" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2231"><a href="http://#">Traditional Voice</a></li>
<li id="menu-item-2232" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2232"><a href="http://#">Other Services</a></li>
<li id="menu-item-2233" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2233"><a href="http://#">Mobile App</a></li>
</ul>
</li>
<li id="menu-item-646" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-646"><a href="http://www.itstelecom.com/NewSite/index.php/products-services/data/">Data</a>
<ul class="sub-menu">
<li id="menu-item-2235" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2235"><a href="http://#">Test</a></li>
<li id="menu-item-2236" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2236"><a href="http://#">Test</a></li>
<li id="menu-item-2237" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2237"><a href="http://#" style="
display: block;
">Test</a></li>
</ul>
</li>
<li id="menu-item-656" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-656"><a href="http://www.itstelecom.com/NewSite/index.php/products-services/computers-servers-network-services/">Computers, Servers, & Network Services</a></li>
<li id="menu-item-655" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-655"><a href="http://www.itstelecom.com/NewSite/index.php/products-services/equipment-infrastructure/">Equipment & Infrastructure</a></li>
<li id="menu-item-654" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-654"><a href="http://www.itstelecom.com/NewSite/index.php/products-services/other-services/">Other Services</a></li>
</ul>
</li>
<li id="menu-item-827" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-827"><a href="#">Clients</a>
<ul class="sub-menu">
<li id="menu-item-486" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-486"><a href="http://www.itstelecom.com/NewSite/index.php/clients/client-center/">Client Center</a></li>
<li id="menu-item-489" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-489"><a href="http://www.itstelecom.com/NewSite/index.php/clients/terms-of-service/">Terms of Service</a></li>
<li id="menu-item-634" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-634"><a href="http://www.itstelecom.com/NewSite/index.php/clients/faqs/">FAQs</a></li>
<li id="menu-item-603" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-603"><a href="http://www.itstelecom.com/NewSite/index.php/clients/referral-program/">Referral Program</a></li>
</ul>
</li>
<li id="menu-item-828" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-828"><a href="#">Channel Partners</a>
<ul class="sub-menu">
<li id="menu-item-632" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-632"><a href="http://www.itstelecom.com/NewSite/index.php/clients/program-overview/">Program Overview</a></li>
<li id="menu-item-412" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-412"><a href="http://www.itstelecom.com/NewSite/index.php/channel-partners/current-channel-partners/">Current Channel Partners</a></li>
<li id="menu-item-401" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-401"><a href="http://www.itstelecom.com/NewSite/index.php/channel-partners/partnerships/">Vendor Partnerships</a></li>
<li id="menu-item-404" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-404"><a href="http://www.itstelecom.com/NewSite/index.php/channel-partners/becoming-a-channel-partner/">Become a Channel Partner</a></li>
</ul>
</li>
<li id="menu-item-829" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-829"><a href="#">Community</a>
<ul class="sub-menu">
<li id="menu-item-499" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-499"><a href="http://www.itstelecom.com/NewSite/index.php/community/blog/">Blog</a></li>
<li id="menu-item-502" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-502"><a href="http://www.itstelecom.com/NewSite/index.php/community/newsletter-archive/">Newsletter Archive</a></li>
<li id="menu-item-508" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-508"><a href="http://www.itstelecom.com/NewSite/index.php/community/hot-tip-archive/">Hot Tip Archive</a></li>
</ul>
</li>
</ul></div>?</div></div></div>
CSS Code:
.menu,
.menu ul,
.menu li,
.menu a {
margin: 0;
padding: 0;
border: none;
outline: none;
z-index: 1000;
}
/* Menu */
.menu {
position: relative;
height: 40px;
width: 555px;
background: #1b3563;
background: -webkit-linear-gradient(top, #1b3563 0%,#2c2d33 100%);
background: -moz-linear-gradient(top, #1b3563 0%,#2c2d33 100%);
background: -o-linear-gradient(top, #1b3563 0%,#2c2d33 100%);
background: -ms-linear-gradient(top, #1b3563 0%,#2c2d33 100%);
background: linear-gradient(top, #1b3563 0%,#2c2d33 100%);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.menu li {
position: relative;
list-style: none;
float: left;
display: block;
height: 40px;
}
/* Links */
.menu li a {
display: block;
padding: 0 14px;
margin: 6px 0;
line-height: 28px;
text-decoration: none;
border-left: 1px solid #393942; /* Dashs between links color*/
border-right: 1px solid #4f5058; /* Dashs between links color*/
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 13px;
color: #f3f3f3;/* Main text color */
text-shadow: 1px 1px 1px rgba(0,0,0,.6);
-webkit-transition: color .2s ease-in-out;
-moz-transition: color .2s ease-in-out;
-o-transition: color .2s ease-in-out;
-ms-transition: color .2s ease-in-out;
transition: color .2s ease-in-out;
}
.menu li:first-child a { border-left: none; }
.menu li:last-child a{ border-right: none; }
.menu li:hover > a { color: #acb8bf; }
/* Sub Menu */
.menu ul {
position: absolute;
top:100%;
left: 0;
border-bottom-color:#000000;
opacity: 0;
background: #1b3563;
background: -webkit-linear-gradient(top, #1b3563 0%,#2c2d33 100%);
background: -moz-linear-gradient(top, #1b3563 0%,#2c2d33 100%);
background: -o-linear-gradient(top, #1b3563 0%,#2c2d33 100%);
background: -ms-linear-gradient(top, #1b3563 0%,#2c2d33 100%);
background: linear-gradient(top, #1b3563 0%,#2c2d33 100%);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-transition: opacity .25s ease .1s;
-moz-transition: opacity .25s ease .1s;
-o-transition: opacity .25s ease .1s;
-ms-transition: opacity .25s ease .1s;
transition: opacity .25s ease .1s;
}
.menu li:hover > ul { opacity: 1; }
.menu ul li {
height: 0;
overflow: hidden;
padding: 0;
-webkit-transition: height .25s ease .1s;
-moz-transition: height .25s ease .1s;
-o-transition: height .25s ease .1s;
-ms-transition: height .25s ease .1s;
transition: height .25s ease .1s;
}
.menu li:hover > ul li {
float:right;
height: auto;
overflow: visible;
padding: 0;
}
.menu ul li a {
width: 150px;
margin: 0;
border: none;
border-bottom: 1px solid #353539;
}
.menu ul li:last-child a { border: none; }
#menu-main-menu .sub-menu .sub-menu > ul {
display: block;
}
#menu-main-menu .sub-menu .sub-menu ul {
display: none;
position: absolute;
left: 100%;
top: 0;
}
#menu-main-menu .sub-menu .sub-menu ul li a {
background: #528009;
border-bottom: 1px dotted #97b36b;
}
#menu-main-menu .sub-menu .sub-menu ul li a:hover {
background: #345105;
}
.menu ul ul {
box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
position: absolute;
top: 0px;
left: 100%;
width: 180px;
z-index: 99999;
}
.menu ul ul a:hover {
display:block; !important
}?
Basically your method of showing/hiding nested lists with
opacityis the root of the issue. The second list is overlapping the first because they have the samez-indexvalues, even when it isn’t visible.You’ll need to either add styles on hover that rework the
z-indexvalues so only the current hovered list is on top, or make your nested menu system more manageable by moving the hidden lists off through positioning, so they won’t get in the way.