1番目のリスト項目の後にドロップダウンメニューが表示されないようにするにはどうすればよいですか？

Question

すべてのタブに3つのサブリスト項目があるドロップダウンメニューがあります。マウスを2番目のドロップダウンメニューリスト項目に移動すると、ドロップダウンメニューが消える問題があります。どのようにこれを修正するための任意のアイデア？私は設定した.sub-navもホバー上にブロックを表示するのに疲れましたが、これは何の理由もありませんでした。

nav { 
 
    color: white; 
 
    background-color: orange; 
 
    margin: auto; 
 
    padding: 0; 
 
    max-width: 100%; 
 
} 
 
nav li > span, 
 
nav a { 
 
    font-size: 1.5em; 
 
} 
 
nav ul { 
 
    max-height: 100%; 
 
    text-align: right; 
 
    max-width: 100%; 
 
    margin: auto; 
 
    padding: 0 5% 0 0; 
 
} 
 
nav li { 
 
    max-height: 100%; 
 
    border-style: solid; 
 
    border-width: 0 1px 0 0; 
 
    border-color: rgba(0, 0, 0, .1); 
 
    display: inline-block; 
 
    list-style: none; 
 
    margin: 3px; 
 
    padding: 2px; 
 
    max-width: 100%; 
 
} 
 
.main-nav:hover { 
 
    background-color: #ffcc33; 
 
} 
 
nav a { 
 
    text-decoration: none; 
 
} 
 
nav a { 
 
    color: orange; 
 
} 
 
.home-page a:visited { 
 
    color: white; 
 
} 
 
nav a:visited { 
 
    color: orange; 
 
} 
 
.active { 
 
    background-color: #ffcc33; 
 
} 
 
.main-nav { 
 
    position: relative; 
 
} 
 
.sub-nav li:hover { 
 
    background-color: rgba(0, 0, 0, .1); 
 
} 
 
.sub-nav { 
 
    position: absolute; 
 
    display: none; 
 
} 
 
.main-nav:hover .sub-nav { 
 
    display: block; 
 
}

<nav> 
 
    <ul> 
 
    <li class="main-nav home-page active"> 
 
     <a href="index.html">HOME</a> 
 
    </li> 
 
    <li class="main-nav"> 
 
     <span> Content 1 </span> 
 
     <ul class="sub-nav"> 
 
     <li><a href="page1.html">Page 1</a> 
 
     </li> 
 
     <li><a href="page2.html">Page 2</a> 
 
     </li> 
 
     <li><a href="page3.html">Page 3</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    <li class="main-nav"> 
 
     <span> Content 2 </span> 
 
     <ul class="sub-nav"> 
 
     <li><a href="page4.html">Page 4</a> 
 
     </li> 
 
     <li><a href="page5.html">Page 5</a> 
 
     </li> 
 
     <li><a href="page6.html">Page 6</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    <li class="main-nav"> 
 
     <span> Content 3 </span> 
 
     <ul class="sub-nav"> 
 
     <li><a href="page7.html">Page 7</a> 
 
     </li> 
 
     <li><a href="page1.html">Page 8</a> 
 
     </li> 
 
     <li><a href="page1.html">Page 9</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</nav>

Answer 1

あなたのNAV内のすべてのULのに設定され、最大の高さを持っているためです。これを削除すると正常に動作します。

nav ul { 
    max-height: 100%; <-- here 
    text-align: right; 
    max-width: 100%; 
    margin: auto; 
    padding: 0 5% 0 0; 
    } 

max-heightが必要な場合は、nav（nav> ul）の最初の子に適用します。

nav > ul { 
    max-height: 100%; 
} 

Codepen例 - http://codepen.io/lukemeaden/pen/mPGreY