ドロップダウンメニューの内容と最後の子

Question

CODE: 

http://jsfiddle.net/qyVMj/140/

現在のドロップダウン画像：http://imgur.com/a/XY8gW

二ドロップダウンコンテンツは、前の一番上に表示されます。 「マン」リンクは表示されません。

また、ulの右側に「連絡先」を入れたいと思います。

Answer 1

は、このコードです：

HTML：

<nav id="main_nav"> 
    <ul> 
     <li> 
      <a href="">Home</a> 
     </li> 
     <li> 
      <a href="">Products</a> 
      <ul> 
       <li> 
        <a href="">Women</a> 
        <ul> 
        <li><a href="">Hats</a></li> 
        <li><a href="">Jeans</a></li> 
        <li><a href="">Shirts</a></li> 
        </ul> 
       </li> 
       <li> 
        <a href="">Men</a> 
        <ul> 
        <li><a href="">Hats</a></li> 
        <li><a href="">Jeans</a></li> 
        <li><a href="">Shirts</a></li> 
        </ul> 
       </li> 
      </ul> 
     </li> 
     <li> 
      <a href="" style="float:right">Contact</a> 
     </li> 
    </ul> 
</nav> 

はCSS：色とデザインについては

ul { 
list-style-type: none; 
margin: 0; 
padding: 0; 
overflow: hidden; 
background-color: gray; 
} 

li { 
float: left; 
} 

li a, .dropbtn { 
display: inline-block; 
color: white; 
text-align: center; 
padding: 14px 16px; 
text-decoration: none; 
} 

li a:hover, .dropdown:hover .dropbtn { 
background-color: #333; 
} 

li.dropdown { 
display: inline-block; 
} 

.dropdown-content { 
display: none; 
position: absolute; 
background-color: #f9f9f9; 
min-width: 160px; 
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
z-index: 1; 
} 

.dropdown-content a { 
color: black; 
padding: 12px 16px; 
text-decoration: none; 
display: block; 
text-align: left; 
} 

.dropdown-content a:hover {background-color: #f1f1f1} 

.dropdown:hover .dropdown-content { 
display: block; 
} 

ul:last-child li 
{ 
    border: none; 
    float: right !important; 
} 

あなたはCSSで適切な変更を行うことができます。

JSFiddle：https://jsfiddle.net/szs4Lapn/4/

リンク

• http://www.htmldog.com/techniques/dropdowns
• Dropdown Menu and Hover Menu (Sub Menu)

Answer 2

あなたの.dropdown-content div（絶対配置されています）には2つの.dropdown-content divが含まれています。これらのdivは2つの.dropdown-content divで構成されています。 。サブサブたNAVにこれらのクラスを削除

はそれが修正されています。

<div class="dropdown-content"> 
    <a href="#">Women</a> 
     <div> 
      <a href="#">Hats</a> 
      <a href="#">Jeans</a> 
      <a href="#">Shirts</a> 
     </div> 
    <a href="#">Man</a> 
     <div> 
      <a href="#">Hats</a> 
      <a href="#">Jeans</a> 
      <a href="#">Shirts</a> 
     </div> 
</div> 

http://jsfiddle.net/qyVMj/141/

また、それが適切なセマンティクスとアクセシビリティのためのネストされたリスト（<ul>と<li>）を使用してナビゲーションを構築するために一般的に良いでしょう。何をしたい