html - Nav dropdown freaks out and shows different tabs -
i'm trying create navbar (already done) dropdown, dropdown keeps spazzing out when hover on :(
i made js fiddle of i've accomplished far, , hoping help!
i think might due display: none;
used in 1 of ul's or possibly due stupid typo can't figure out where!
as this, can't figure out how make sub-menu sub-menus exist.. (so desc tab has submenu of swim squad have sub-menu of other things).. how that? can't figure out start!
cheers in advance!
try this: link
css:
.nav-wrap { background-color: #125cc1; text-align: center; } ul.navigation-bar li { color: #ffffff; background-color: #125cc1; text-align: center; padding: 6px; font-size: 12px; text-decoration: none; text-transform: uppercase; } ul.navigation-bar li a:hover { background-color: #06398f; } ul.navigation-bar { text-align: left; display: inline; margin: 0; list-style: none; } ul.navigation-bar li { line-height:28px; margin-right: -4px; position: relative; display: inline-block; width: 120px; font-weight: bold; color: #ffffff; background-color: #125cc1; text-align: center; } ul.navigation-bar li ul { padding: 0; position: absolute; top: 28px; left: 0; width: 120px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; display: none; opacity: 0; visibility: hidden; -webkit-transiton: opacity 0.2s; -moz-transition: opacity 0.2s; -ms-transition: opacity 0.2s; -o-transition: opacity 0.2s; -transition: opacity 0.2s; } ul.navigation-bar li ul li { background: #125cc1; display: block; color: #fff; } ul.navigation-bar li ul li:hover { background: #06398f; color: #fff; } ul.navigation-bar li:hover ul { display: block; opacity: 1; visibility: visible; }
updated fiddle link
multi-level dropdown menu link
Comments
Post a Comment