菜单项

Question

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

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

如果要在悬停时首先添加伪元素，则需要定位：悬停然后添加伪元素。你的选择器将是.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

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

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