Css 菜单项下的箭头

Question

大家好！我有一个简单的菜单，我正在尝试为每个项目制作一个悬停箭头它应该看起来的样子： sample image。我已经得到这个代码感谢您的任何建议！

.mainmenu{
 display: inline-block;
 list-style-type: none;
 padding-top: 25px;
 padding-left: 0px;
}
.mainmenu_item{
 display: inline;
 padding-right:8px;
}
.mainmenu_link{
 font-family:FrutigerCELight,Arial,Helvetica,sans-serif;
 text-decoration: none;
 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

如果您想先在悬停时添加伪元素，您需要定位 :hover 然后添加伪元素。您的选择器将是 .mainmenu_item:hover:after

.mainmenu{
 display: inline-block;
 list-style-type: none;
 padding-top: 25px;
 padding-left: 0px;
    font-size:0;
}
.mainmenu_item{
    font-size: 14px;
 display: inline-block;
 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{
 font-family:FrutigerCELight,Arial,Helvetica,sans-serif;
 text-decoration: none;
 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

在每个 a 标签后添加 <span class="arrow-up"></span>。

然后添加 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/

Css 菜单项下的箭头

Css arrow under menu item

css

pseudo-element