変更リンク色ドロップダウンが、私はドロップダウンメニューを作っていると私はリンクの色を変更したいが、私は追加した場合

Question

をカットプレゼント：

a { 
    color: white; 
} 

を私はすべてのdiv要素に追加した場合でも、それはドロップダウンが見えなくなります属性

overflow: visible; 

どうしてですか？

https://jsfiddle.net/mvetktg0/

Answer 1

あなたの白のリンクは、あなたがそれらを見ることができない理由である白の上に濃い灰色の背景、外に分類されます。

.link-container a { 
    display: inline-block; 
    width: 100%; 
    height: 100%; 
    padding: 40px 0 40px 0; 
    color: #fff; 
} 

.dropdown-link { 
    background: steelblue; 
} 

Answer 2

テキストは私には見えません。ただ白いです。あなたが追加した場合：

a { 
    background: #404040; 
} 

あなたの白い文字が良く表示されます。私は助けることができますように！ :)

Answer 3

私はあなたのことをもっと目に見えるように変更しました。

bodyとdropdown-linkの背景色を変更しました。また、画像の幅を小さくして、すべてが収まるようにしました。

body { 
    margin: 0; 
    background:lightgrey; 
} 

a { 
    text-decoration: none; 
    color:white; 
} 

.header { 
    width: 100%; 
} 

.head-menu { 
    background-color: #404040; 
} 

.image-container { 
    display: inline-block; 
    width: 100px; 
} 

.image-container img { 
    display: inline; 
    width: 100%; 
    margin: 0; 
} 

.link-container { 
    display: inline-block; 
    width: 16%; 
    text-align: center; 
    overflow: hidden; 
} 

.link-container a { 
    display: inline-block; 
    width: 100%; 
    height: 100%; 
    padding: 40px 0 40px 0; 
} 

.dropdown-link{ 
    background-color: gray; 
} 

.dropdown1-content { 
    display: none; 
    overflow: hidden; 
} 

.dropdown2-content { 
    display: none; 
    overflow: hidden; 
} 

.dropdown-link a { 
    display: inline-block; 
    width: 100%; 
    height: 100%; 
    padding: 0 0 5px 0; 
} 

.dropdown1:hover .dropdown1-content { 
    display: block; 
    position: absolute; 
    width: inherit; 
    z-index: 99; 
} 

.dropdown2:hover .dropdown2-content { 
    display: block; 
    position: absolute; 
    width: inherit; 
} 

Answer 4

次のコードは、あなたのために働く必要があります。

テキストシャドウ：0 1pxの黒。