Css ul ul submenu not hovering over each link

Moufazin

New Member
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:\[code\] <div align="left">&nbsp;<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="http://stackoverflow.com/questions/13826906/#">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="http://stackoverflow.com/questions/13826906/#">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="http://stackoverflow.com/questions/13826906/#">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="http://stackoverflow.com/questions/13826906/#">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="http://stackoverflow.com/questions/13826906/#">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>\[/code\]CSS Code:\[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 }?\[/code\] Jfiddle - Example
 
Back
Top