菜单项下的Css箭头

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

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

来源

2016-10-17 Oleg22J

你可以用CSS伪元素实现这一点（**：**后，**：**前） – Natiq

我知道，这就是为什么我为这个问题添加伪元素类别标签lmao，我需要一些例子，所以我可以分析它。 – Oleg22J

https://css-tricks.com/almanac/selectors/a/after-and-before/ google it bro！ –

如果要悬停添加伪元素首先你需要的目标：悬停，然后添加伪元素。您的选择将是.mainmenu_item：悬停：后

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

来源

2016-10-17 08:49:51

谢谢，这个为我工作！ – Oleg22J

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

来源

2016-10-17 08:53:01

菜单项下的Css箭头

回答

相关问题