i'm having issues navbar menu site. want have main menu, sub menu , sub menu that. 3 levels total.
so far have gotten 2 levels work, cannot 3rd level go under 2nd z-indexing. on same index appears.
anything i've tried messes jquery script did displaying select instead of menu when on small screens.
so how can this?
fiddle (go products > oticon).
html
<header> <select class="menu_mobile_top"> <option>home</option> <option>services</option> <option>products</option> <option>shop</option> <option>prices</option> <option>about</option> <option>contact</option> </select> <nav> <ul class="nav"> <li role="presentation" class="active"><a href="#">home</a></li> <li role="presentation"><a href="#">services</a> <ul class="subnav"> <li role="presentation"><a href="#">service 1</a> <li role="presentation"><a href="#">service 2</a> <li role="presentation"><a href="#">service 3</a> </ul> </li> <li role="presentation"><a href="#">products</a> <ul class="subnav"> <li role="presentation"><a href="#">phonak</a></li> <li role="presentation"><a href="#">resound</a></li> <li role="presentation"><a href="#">siemens</a></li> <li role="presentation"><a href="#">starkey</a></li> <li role="presentation"><a href="#">widex</a></li> <li role="presentation"><a href="#">oticon</a> <ul class="subnavoptions"> <li role="presentation"><a href="#">test1</a></li> <li role="presentation"><a href="#">test 2</a></li> </ul> </li> <li role="presentation"><a href="#">unitron</a></li> <li role="presentation"><a href="#">bernafon</a></li> </ul> </li> <li role="presentation"><a href="#">shop</a></li> <li role="presentation"><a href="#">prices</a></li> <li role="presentation"><a href="#">about</a></li> <li role="presentation"><a href="#">contact</a></li> </ul> </nav> </header> css
body { font-size: 0; text-align: center; background-image: url('../images/bg.png'); background-repeat: repeat; font-family: 'montserrat', sans-serif; } header { width: 100%; height: 50px; background: #304770; z-index: 10; } h1 { font-family: 'montserrat', sans-serif; font-weight: bold; font-size: 34pt; } { text-decoration: none; color: inherit; } nav { position: relative; width: 100%; z-index: 10; } a:hover { text-decoration: none; color: inherit; } ::-webkit-input-placeholder { color: #99c2ec; } :-moz-placeholder { /* firefox 18- */ color: #99c2ec; } ::-moz-placeholder { /* firefox 19+ */ color: #99c2ec; } :-ms-input-placeholder { color: #99c2ec; } .bodyframe { display: inline-block; box-shadow: 0 6px 15px rgba(0, 0, 0, 0.6); } .div_container { max-width: 1460px; width: 100%; display: inline-block; margin: 0 auto; } .logo-div { padding: 15px 0 10px; } .logo-div div { display: inline-block; width: 50%; font-size: 14px; color: #304770; } .center { margin: 0 auto; } .nav-offset { display: inline-block; } .nav { height: 50px; display: block; position: relative; list-style: none; background: #304770; } .nav li { display: inline-block; background-color: #304770; margin: 0 5px; position: static; } .nav li { padding: 12px 15px; font-size: 18px; color: #efefef; display: block; } .nav li.active { color: orange; } .nav > li.active > a:before { width: 100%; } .nav li:hover > { background-color: #304770; color: orange; transition: color 0.25s; } .nav > li > a:before { content: ""; display: block; position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background-color: orange; -webkit-transition: width 0.2s; -moz-transition: width 0.2s; -o-transition: width 0.2s; transition: width 0.2s; } .nav > li:nth-last-of-type(1) > a:after { display: none; } .nav li a:hover:before { width: 100%; } .nav > li > a:after { content: ""; display: block; position: absolute; right: -8px; top: 21px; height: 6px; width: 6px; background: #ffffff; opacity: .5; } .nav li:hover .subnav { top: 49px; } .subnav { border-bottom: 1px solid #304770; width: 100%; list-style-type: none; display: block; position: absolute; top: 12px; z-index: -1; left: 0; margin: 0; padding: 0; background-color: #ccc; transition: top 0.2s; -webkit-transition: top 0.2s; -moz-transition: top 0.2s; -o-transition: top 0.2s; -webkit-transition-delay: 0.05s; -moz-transition-delay: 0.05s; -o-transition-delay: 0.05s; transition-delay: 0.05s; } .subnav > li { display: inline-block; background-color: #ccc; margin: 0; padding: 0 5px; } .subnav li { padding: 8px 10px; font-size: 14px; color: #304770; display: block; } .subnav li:hover .subnavoptions { top: 36px; } .subnavoptions { border-bottom: 1px solid #304770; width: 100%; list-style-type: none; display: block; position: absolute; top: 0px; z-index: -2; left: 0; margin: 0; padding: 0; background-color: #efefef; transition: top 0.2s; -webkit-transition: top 0.2s; -moz-transition: top 0.2s; -o-transition: top 0.2s; -webkit-transition-delay: 0.05s; -moz-transition-delay: 0.05s; -o-transition-delay: 0.05s; transition-delay: 0.05s; } .subnavoptions li { display: inline-block; background-color: #ccc; margin: 0 5px; } .subnavoptions li { padding: 8px 10px; font-size: 14px; color: #304770; display: block; } .menu_mobile_top { display: none; position: relative; font-size: 16px; top: 5px; background-color: #2a333f; border: 1px solid transparent; color: #efefef; width: 250px; margin: 5px 0; padding: 3px; } .menu_mobile_top:focus, option:focus { outline: none !important; border-color: orange; }
i don't see styles defined third level menu. add following , try.
.subnavoptions li li{ top:50px; }
Comments
Post a Comment