Css arrow under menu item

Question

おはようございます！ 私はシンプルなメニューを手に入れました。それぞれのアイテムにホバーの矢印をつけようとしています。 見た目は sample imageです。私はこのコードをすでに持っています アドバイスありがとう！

.mainmenu{ 
 
\t display: inline-block; 
 
\t list-style-type: none; 
 
\t padding-top: 25px; 
 
\t padding-left: 0px; 
 
} 
 
.mainmenu_item{ 
 
\t display: inline; 
 
\t padding-right:8px; 
 
} 
 
.mainmenu_link{ 
 
\t font-family:FrutigerCELight,Arial,Helvetica,sans-serif; 
 
\t text-decoration: none; 
 
\t font-size:14px; 
 
    color:black; 
 
}

<ul class="mainmenu"> 
 
    <li class="mainmenu_item"><a class="mainmenu_link" href="#" title="Home">Home</a> 
 
    </li> 
 
    <li class="mainmenu_item"><a class="mainmenu_link" href="#" title="About Us">About Us</a> 
 
    </li> 
 
    <li class="mainmenu_item"><a class="mainmenu_link" href="#" title="Services">Services</a> 
 
    </li> 
 
    <li class="mainmenu_item"><a class="mainmenu_link" href="#" title="Portfolio">Portfolio</a> 
 
    </li> 
 
    <li class="mainmenu_item"><a class="mainmenu_link" href="#" title="Blog">Blog</a> 
 
    </li> 
 
    <li class="mainmenu_item"><a class="mainmenu_link" href="#" title="Contact">Contact</a> 
 
    </li> 
 
</ul>

Answer 1

あなたが最初のホバー上の擬似要素を追加したい場合は、ターゲットにする必要があります：置いて、その後、擬似要素を追加します。すべてのaタグの後<span class="arrow-up"></span>を追加

.mainmenu{ 
 
\t display: inline-block; 
 
\t list-style-type: none; 
 
\t padding-top: 25px; 
 
\t padding-left: 0px; 
 
    font-size:0; 
 
} 
 
.mainmenu_item{ 
 
    font-size: 14px; 
 
\t display: inline-block; 
 
\t padding:8px; 
 
    position: relative; 
 
    line-height:2em; 
 
    background: #000; 
 
    color: #FFF; 
 
} 
 
.mainmenu_item a { 
 
    text-decoration: none; 
 
    color: currentColor; 
 
} 
 
.mainmenu_item:hover:after { 
 
    content:''; 
 
    width: 0; 
 
    height: 0; 
 
    border-left: 5px solid transparent; 
 
    border-right: 5px solid transparent; 
 
    border-bottom: 5px solid currentColor; 
 
    position: absolute; 
 
    bottom:0; 
 
    left:50%; 
 
    margin-left: -5px; 
 
} 
 
.mainmenu_link{ 
 
\t font-family:FrutigerCELight,Arial,Helvetica,sans-serif; 
 
\t text-decoration: none; 
 
\t font-size:14px; 
 
}

<ul class="mainmenu"> 
 
    <li class="mainmenu_item"><a class="mainmenu_link" href="#" title="Home">Home</a> 
 
    </li> 
 
    <li class="mainmenu_item"><a class="mainmenu_link" href="#" title="About Us">About Us</a> 
 
    </li> 
 
    <li class="mainmenu_item"><a class="mainmenu_link" href="#" title="Services">Services</a> 
 
    </li> 
 
    <li class="mainmenu_item"><a class="mainmenu_link" href="#" title="Portfolio">Portfolio</a> 
 
    </li> 
 
    <li class="mainmenu_item"><a class="mainmenu_link" href="#" title="Blog">Blog</a> 
 
    </li> 
 
    <li class="mainmenu_item"><a class="mainmenu_link" href="#" title="Contact">Contact</a> 
 
    </li> 
 
</ul>

Answer 2

後：ホバー：あなたのセレクタは.mainmenu_itemになります。

その後、CSSを追加します。

.mainmenu_item:hover .arrow-up { 
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent; 
    border-right: 5px solid transparent; 
    border-bottom: 5px solid white; 
    position: absolute; 
    top:33px; 
    left:40%; 
} 

あなたの自己https://jsfiddle.net/5fbuLh7g/