导航栏上的Z索引问题

Question

我的导航栏菜单中存在一些与我的网站有关的问题。我想拥有主菜单，子菜单和子菜单。所以共有3个等级。

到目前为止，我已经获得了2个级别的工作，但我无法通过z-indexing获得第二级别下的第二级别。目前它们只与它出现的索引相同。

任何我试图用jQuery脚本弄错了我在显示select而不是在小屏幕上的菜单。

那么我该如何做到这一点？

Fiddle（Go产品>奥迪康）。

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; 
} 

a { 
    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 a { 
    padding: 12px 15px; 
    font-size: 18px; 
    color: #EFEFEF; 
    display: block; 
} 

.nav li.active a { 
    color: orange; 
} 

.nav > li.active > a:before { 
    width: 100%; 
} 

.nav li:hover > a { 
    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 a { 
    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 a { 
    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; 
} 

Answer 1

我没有看到第三级菜单定义的样式。添加以下内容并尝试。

.subnavoptions li a li{ 
top:50px; 

}