CSSテキスト装飾：なし;

Question

私はフレックスボックスについてチュートリアルをオンラインで読んでいて、ドロップダウンメニューを作ろうとしました。しかし、動作しない唯一のことは、テキスト装飾：全く効果がないということです。私はテキストを白くするためにカラー＃fffを使用しなければなりませんか？

なぜ私は+記号を使用する必要があり、ドロップダウンメニューを表示するときに>記号を使用できないのですか？

header { 
 
    display: flex; 
 
    width: 100%; 
 
    z-index; 
 
    1000; 
 
    background: linear-gradient(to left, rgba(54, 194, 182, 0.96) 0, rgba(62, 188, 207, 0.96) 100%); 
 
    border-bottom: 1px solid rgba(0, 0, 0, .1); 
 
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .1); 
 
} 
 
header nav ul { 
 
    list-style: none; 
 
    margin 0; 
 
    padding 0; 
 
    display: flex; 
 
    justify-content: start; 
 
} 
 
header nav ul li { 
 
    position: relative; 
 
    flex: 0 1 auto; 
 
} 
 
header nav ul li:hover { 
 
    background: rgba(58, 162, 173, 1); 
 
} 
 
header nav ul li a { 
 
    align-items: flex-start; 
 
    display: flex; 
 
    font-size: 1.55rem; 
 
    font-weight: 200px; 
 
    letter-spacing: 1px; 
 
    max-width: 130px; 
 
    padding: 1rem 1.5rem; 
 
    text-decoration: none; 
 
} 
 
header nav ul li a + ul { 
 
    border-radius: 0 0 2px 2px; 
 
    display: none; 
 
    font-size: 1rem; 
 
    position: absolute; 
 
    width: 195px; 
 
    background: linear-gradient(to bottom, rgba(58, 162, 173, 1) 0, rgba(62, 188, 207, 0.96) 100%); 
 
    ; 
 
} 
 
header nav ul li:hover a + ul { 
 
    display: block; 
 
}

<header> 
 
    <nav role="navigation"> 
 
    <ul> 
 
     <li> 
 
     <a href="/"> 
 
       Home 
 
      </a> 
 
     </li> 
 
     <li> 
 
     <a href="/blog"> 
 
       Blog 
 
      </a> 
 
     <ul> 
 
      <li><a href="#">Me</a> 
 
      </li> 
 
      <li><a href="#">Gaming</a> 
 
      </li> 
 
      <li><a href="#">Sport</a> 
 
      </li> 
 
      <li><a href="#">Web Design</a> 
 
      </li> 
 
      <li><a href="#">Web Development</a> 
 
      </li> 
 
     </ul> 
 

 
     </li> 
 
     <li> 
 
     <a href="/contact">  
 
       Contact  
 
      </a> 
 
     </li> 
 
     <li> 
 
     <a href="/forum"> 
 
       Forum 
 
      </a> 
 
     </li> 
 
    </ul> 
 
    </nav> 
 
</header>

Answer 1

text-decoration色を変更しませんが、それはアンカーが

即時siblin下線削除しますあなたはこのようなルールを使用する際に対象要素がa要素の子ではないので、セレクタ+が必要とされているグラム、その兄弟

だから、あなたは+

header nav ul li:hover a + ul { 
    display: block; 
} 

をする必要がありますしかし、あなたが変更した場合それのようにあなたが>

header nav ul li:hover > ul { 
    display: block; 
} 

Answer 2

text-decoration:none;リンクのデフォルトの下線を削除し、それが色を変更しません。

あなたが白のテキストをしたい場合は、white（または同等）に<a>の色を設定し、言ったように：

header nav ul li a { 
    align-items: flex-start; 
    display: flex; 
    font-size: 1.55rem; 
    font-weight: 200px; 
    letter-spacing: 1px; 
    max-width: 130px; 
    padding: 1rem 1.5rem; 
    text-decoration: none; 
    color:white; 
} 

Updated JSFiddle

をも、なぜ私は+を使用する必要がありますサインと私はドロップダウンメニューを表示するときに>記号を使用できませんか？

あなたのCSSでheader nav ul li a + ulのようなセレクタを参照していると仮定します。これは、+と>の組み合わせが異なる意味を持っているためです。この場合におけるので+は、隣接する兄弟コンビネータ：このコンビネータはさえ必要とされていない

<a href="/blog">Blog</a> Hover over the a 
<ul></ul> Select the ul that is an adjacent sibling 

、あなたは、単に行うことができます

<li>の子である <ul>を選択

header nav ul li > ul 

は