CSS隣接兄弟がドロップダウンメニューの余白を壊す

w3schoolsのexampleに基づいてCSSドロップダウンメニューを実装しようとしています。これは動作していますが、dropbtnクラスの左余白は単純ナビゲーションリンク（Home、News）の左余白と同じではありません。 1つのリスト項目から別の項目項目に移動するときに、ドロップダウンメニューを実装する項目は、左に黒い境界線があり、説明できません。CSS隣接兄弟がドロップダウンメニューの余白を壊す

この動作は、図のようにli + li：beforeを使用してアイテム間にデバイダを実装しようとしたときに開始されました。here。

default.htmlの

<!DOCTYPE HTML> 
<html> 
<head> 
    <link rel="stylesheet" type="text/css" href="styles/style.css" /> 
</head> 
<body> 
    <ul> 
     <li><a href="#home">Home</a></li> 
     <li><a href="#news">News</a></li> 
     <li class="dropdown"> 
      <a href="javascript:void(0)" class="dropbtn">Dropdown</a> 
      <div class="dropdown-content"> 
       <a href="#">Link 1</a> 
       <a href="#">Link 2</a> 
       <a href="#">Link 3</a> 
      </div> 
     </li> 
    </ul> 
    <h3>Dropdown Menu inside a Navigation Bar</h3> 
    <p>Hover over the "Dropdown" link to see the dropdown menu.</p> 
</body> 
</html>

あなたは、もう少し正確にちょうど位置つまりbefore要素できるのstyle.css

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

li { 
    float: left; 
} 

li+li:before { 
    color: white; 
    content: "|"; 
} 

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: red; 
} 

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); 
} 

.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; 
}

出典

2017-01-05 Derrick Moeller

私にとってはうまいようです...この黒い線はどこですか？ –

@SergChernataホバーでは、ホームとニュースリストの背景が黒から赤に変わります。ドロップダウンリスト項目の背景も赤に変わりますが、左の余白には、幅が5pxの黒いままの小さな領域があります。私はそれを考えて、私が推測している|文字が表示されている文字よりも広い場合は、これをマイナスのマージンで修正できますか？ –

：

li { 
    float: left; 
    position: relative; 
} 

li+li:before { 
    color: white; 
    content: "|"; 
    left: -1px; 
    top: 14px; 
    position: absolute; 
}

https://jsfiddle.net/oao3yt8w/

出典

2017-01-05 20:47:30

あなたの解決策は余白を修正したように見えますが、ドロップダウンはもはや機能していませんか？ –

フィドルを更新しました。オーバーフローを取り除かなければならなかった：あなたのulに隠されて、それに高さを加えなさい。 https://jsfiddle.net/oao3yt8w/1/ –

CSS隣接兄弟がドロップダウンメニューの余白を壊す

答えて

関連する問題