挿入]サブメニューは、私がネイティブにサブメニューをサポートしていません。このテンプレートを使用しています

Question

は、しかし、私は本当に、そのデザインが好き

<div id="menu"> 
     <nav> 
      <div class="wrap-nav"> 
       <ul> 
       <li><a href="#">Home</a></li> 

     <li><a href="#">Projects</a> 
     <ul class="sub-menu"> 
     <li><a href="#">Blog</a></li> 
    <li><a href="#">Services</a> 
    <ul class="sub-menu"> 
    <li><a href="#">ONE</a></li> 
<li><a href="#">TWO</a></li> 
</ul> 
</li> 

    </ul> 

    </li>   
     </ul> 
      </div> 
     </nav> 
    </div> 

CSSサブメニューのないバージョンのために、テンプレートのようである：

nav { 
    display: inline-block; 
    z-index: 1111; 
    position: relative; 
    float: right; 
} 
ul.menu { 
    margin: 28px 10px 0px 0px; 
    display: inline-block; 
} 
ul.menu li { 
    float: left; 
    line-height: 30px; 
    margin: 0px 0px 0px 48px; 
} 
ul.menu li:hover, 
ul.menu li.current {} ul.menu li a { 
    font-size: 25px; 
    line-height: 30px; 
    color: #f2f2f2; 
    display: inline-block; 
} 
ul.menu li a:hover, 
ul.menu li.current a { 
    color: #ff9000; 
} 

私は写真のように望ましくない影響でサブメニューを収容するために、次の追加：

ul.menu li ul { display:none; list-style:none;top:30px; left:auto; float:right; text-align:left;position:relative; width:200px !important; border:1px solid blue;z-index:10000; } 

ul.menu li:hover > .sub-menu { display:block; } 
.sub-menu li {display:block;} 
.sub-menu li a { 

display：block;高さ：40ピクセル、フォントサイズ：0.89em、パディング：5ピクセル30ピクセル、 }

幅：200ピクセルは、サブメニューを垂直方向に表示することを拒否したため、必死に動きました（私は表示：ブロックがトリックを行うと仮定しました）。

任意の入力：とにかく

、上記コードは醜いで次の結果を示していますか？

Answer 1

コードにいくつかの問題があります。

• ルール1：常にコードを正しくフォーマットしてください。私を信頼して差をつけるでしょう！
• あなたのCSSでmenuクラスを使用していますが、あなたのhtmlには何もありません（idはclassではありません）。
• 私は純粋なCSSのサブメニューの仕組みの下に、あなたがあなたのものを作るために必要なものをすべて持っていることを示します。

ul { 
 
    /* We are removing default styles of ul */ 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
ul li { 
 
    /* Applies to all li */ 
 
    display: block; 
 
    float: left; 
 
    position: relative; /* this will make the sub-menu positionned relatived to the hovered li */ 
 
} 
 

 
ul li + li { 
 
    margin-left: 28px; /* just to space your li */ 
 
} 
 

 
li ul { 
 
    display: none; /* Hides the submenu */ 
 
    text-align: right; /* Display sub-menu text on the right */ 
 
} 
 

 
ul li a { 
 
    /* Your styles for the links here I let browser's defaults */ 
 
} 
 

 
ul li a:hover { 
 
    /* Your styles for the links when hovered */ 
 
    color: #ff9000; 
 
} 
 

 
li ul li + li { 
 
    margin-left: 0; /* Remove the margin between li that we applied above */ 
 
} 
 

 
li:hover > ul { 
 
    display: block; /* On hover show sub-menu */ 
 
    position: absolute; 
 
} 
 

 
li:hover li { 
 
    float: none; /* Remove floating for sub-menu li so that li displays one above the other */ 
 
} 
 

 
ul ul ul { 
 
    right: 100%; /* position sub-menu of sub-menu to the left of the parent submenu */ 
 
    top: 0; 
 
} 
 

 
ul ul ul li { 
 
    margin-right: 8px; /* Just so that li inside submenu of submenu don't touch parent submenu's li (it depends on the style you want for your menu) */ 
 
} 
 

 
ul::after { 
 
    /* Clearfix because we've used float on ul */ 
 
    content: ''; 
 
    display: block; 
 
    clear: both; 
 
}

<nav> 
 
    <ul> 
 
    <li><a href="#">Home</a></li> 
 
    <li><a href="#">Projects</a> 
 
     <ul class="sub-menu"> 
 
     <li><a href="#">Blog</a></li> 
 
     <li><a href="#">Services</a> 
 
      <ul class="sub-menu"> 
 
      <li><a href="#">ONE</a></li> 
 
      <li><a href="#">TWO</a></li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</nav>