ナビゲーションバーの矢印が各タブの下に表示されないCSS

Question

ナビゲーションバーの各タブを指す矢印を取得するには、CSSを使用します。これはこれまで私が持っていたものです。

ul { 
 
    background: rgba(0,0,0,0.3); 
 
    list-style-type: none; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    margin: 0; 
 
} 
 

 
li { 
 
    float: left; 
 
} 
 

 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 16px 16px; 
 
    text-decoration: none; 
 
    -webkit-transition:color 0.5s ease-in; 
 
} 
 

 
li a:visited { 
 
    color: white; 
 
} 
 

 
li a:hover { 
 
    color: #df9fa2; 
 
} 
 

 
#menu a:hover:after { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 52px; 
 
    width: 0px; 
 
    left: 50%; 
 
    margin-left: -15px; 
 
    border-left: 15px solid transparent; 
 
    border-right: 15px solid transparent; 
 
    border-top: 15px solid rgba(0,0,0,0.3); 
 
}

<div id="nav">  
 
    <ul id="menu"> 
 
     <li><a class="link" href="#home">Home</a></li> 
 
     <li><a class="link" href="#about">About</a></li> 
 
     <li><a class="link" href="#skills">Skills</a></li> 
 
     <li><a class="link" href="#portfolio">Portfolio</a></li> 
 
     <li style="float:right"><a class="link" href="#contact">Contact</a></li> 
 
    </ul> 
 
</div>

矢印は、常にナビゲーションバーの途中で示しています。これはコードleft: 50%のためです。私はそれが間違った要素から50％を得ているので、これをやっていると思いますが、それを修正する方法はわかりません。どんな助けも素晴らしいだろう。

Answer 1

ポジショニングは時には微妙なことがあります。親の位置（<a>：position: relative;）は、矢印の位置がリンクを基準に計算されるようにする必要があります。

バーの下に矢印を設定するには、矢印の高さからbottom: -15px;を引いたbottomを使用する必要があります。あなたのoverflow:hidden;を削除し、の高さが浮動要素のみを含むゼロであるため、<li>タグの後にclear:both;の要素を表示して表示させる必要がありました。

ul { 
 
    background: rgba(0, 0, 0, 0.3); 
 
    list-style-type: none; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
li { 
 
    display: block; 
 
    float: left; 
 
} 
 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 16px 16px; 
 
    text-decoration: none; 
 
    -webkit-transition: color 0.5s ease-in; 
 
    position: relative; 
 
} 
 
li a:visited { 
 
    color: white; 
 
} 
 
li a:hover { 
 
    color: #df9fa2; 
 
} 
 
#menu a:hover:after { 
 
    content: ""; 
 
    position: absolute; 
 
    bottom: -15px; 
 
    width: 0px; 
 
    left: 50%; 
 
    margin-left: -15px; 
 
    border-left: 15px solid transparent; 
 
    border-right: 15px solid transparent; 
 
    border-top: 15px solid rgba(0, 0, 0, 0.3); 
 
}

<div id="nav"> 
 
    <ul id="menu"> 
 
    <li><a class="link" href="#home">Home</a> 
 
    </li> 
 
    <li><a class="link" href="#about">About</a> 
 
    </li> 
 
    <li><a class="link" href="#skills">Skills</a> 
 
    </li> 
 
    <li><a class="link" href="#portfolio">Portfolio</a> 
 
    </li> 
 
    <li style="float:right;"><a class="link" href="#contact">Contact</a> 
 
    </li> 
 
    <br style="clear:both;" /> 
 
    </ul> 
 
</div>

ただ、CSSでのポジショニングについてのいくつかの例をお読みください。 http://www.w3schools.com/css/css_positioning.asp