悬停后如何创建像箭头一样的向下三角形答案

【问题标题】：How Create a Down Triangle Like Arrow After Divs In Hover悬停后如何创建像箭头一样的向下三角形
【发布时间】：2016-10-10 07:38:41
【问题描述】：

我写了自爆菜单。现在我想在每个 li 悬停时创建箭头按钮。但是代码无法正常工作。 css 代码无法正常工作，箭头未显示在我悬停的 div 底部...

这是我的 sn-p：

/* body layout */
body {
	background:#1b1c20;
}

/* flat mega menu layout start */
.Flat_mega_menu ul,
.Flat_mega_menu li,
.Flat_mega_menu a,
.Flat_mega_menu p,
.Flat_mega_menu i {
	margin: 0;
	padding: 0;
	list-style: none;
	text-decoration: none;
	display: block;
}

/* mega menu layout */
.Flat_mega_menu {
	font-family: Nunito;		/* google webfont nunito */
	min-height: 60px;
	width: 100%;
	min-width: 240px;
	max-width: 1280px;
	position: relative;
	z-index: 999;
	background: #613570;
}

/* menu unorderlist layout */
.Flat_mega_menu > ul {
	width: 100%;
	height: 60px;
}

/* menu list items layout */
.Flat_mega_menu > ul > li {
	float: right;
	height: 60px;
	width: 10%;
	border-left: 1px solid #542961;
	white-space: nowrap;
}

/* menu a tag + user_login + search_bar hover effect */
.Flat_mega_menu > ul > li:hover a,
.Flat_mega_menu ul .user_login:hover .fa.fa-user,
.Flat_mega_menu ul .search_bar:hover .fa.fa-search {
	color: #613570;
	transition: all 0.2s linear 0s;
	-moz-transition: all 0.2s linear 0s;
	-webkit-transition: all 0.2s linear 0s;
	-ms-transition: all 0.2s linear 0s;
	-o-transition: all 0.2s linear 0s;
	
}

/* menu a tag layout */
.Flat_mega_menu ul li a {
	color: #FFFFFF;
	text-align: center;
	line-height: 60px;
	font-size: 16px;
	float: left;
	width: 100%;
}



/* submenu display none */
.Flat_mega_menu ul li .submenu {
	display: none
}

/* submenu with four column layout */
.Flat_mega_menu ul li .submenu.four_col {
	display: none;
	position: absolute;
	left: 0px;
	top: 60px;
	width: 100%;
	min-height:35px;
	background: #FFFFFF;
	border-bottom: 5px solid #613570;
}

/* submenu with four column list items layout */
.Flat_mega_menu ul li .submenu.four_col li {
	float: right;
	width: 10%;
}

/* submenu with four column a tag layout */
.Flat_mega_menu ul li .submenu.four_col li a {
	color: #555658;
	text-align: left;
	white-space: normal;
	line-height: 40px;
	margin-bottom: 1px;
	font-size: 14px;
}

/* submenu with four column a tag hover effct */
.Flat_mega_menu ul li .submenu.four_col li:hover a {
	text-indent: 5px;
	color: #000000
}

/* submenu with four column title class layout */
.Flat_mega_menu ul li .submenu.four_col .title {
	font-size: large;
	margin: 2%;
	font-weight: bold;
}


/* mouse hover display submenus */
.Flat_mega_menu ul li:hover .submenu.one_col,
.Flat_mega_menu ul li:hover .submenu.two_col,
.Flat_mega_menu ul .search_bar:hover ul,
.Flat_mega_menu ul .user_login:hover ul,
.Flat_mega_menu ul .social_bar:hover ul,
.Flat_mega_menu ul li:hover .submenu.img_container,
.Flat_mega_menu ul li:hover .submenu.four_col {
	display: block;
	
	/* animation */
	animation: display_submenus 0.2s linear 0s 1 forwards;
	-webkit-animation: display_submenus 0.2s linear 0s 1 forwards;
	-moz-animation: display_submenus 0.2s linear 0s 1 forwards;
	-ms-animation: display_submenus 0.2s linear 0s 1 forwards;
	-o-animation: display_submenus 0.2s linear 0s 1 forwards;
}

/* second level submenu hover effect */
.Flat_mega_menu ul li .submenu.one_col li:hover > .submenu.one_col {
	display: block;
	
	/* animation */
	animation: display_submenus_second 0.2s linear 0s 1 forwards;
	-webkit-animation: display_submenus_second 0.2s linear 0s 1 forwards;
	-moz-animation: display_submenus_second 0.2s linear 0s 1 forwards;
	-ms-animation: display_submenus_second 0.2s linear 0s 1 forwards;
	-o-animation: display_submenus_second 0.2s linear 0s 1 forwards;
}

/* checkbox button layout */
.Flat_mega_menu .mobile_button,
.Flat_mega_menu .fa.fa-bars {
	display:none;
}


/* default animation keyframes */
@keyframes display_submenus {
 0% {
opacity:0
}
 100% {
opacity:1
}
}

/* animation for chrome and safari */
@-webkit-keyframes display_submenus {
 0% {
opacity:0
}
 100% {
opacity:1
}
}

/* animation for firefox */
@-moz-keyframes display_submenus {
 0% {
opacity:0
}
 100% {
opacity:1
}
}

/* animation for internet explorer 10+ */
@-ms-keyframes display_submenus {
 0% {
opacity:0
}
 100% {
opacity:1
}
}

/* animation for opera */
@-o-keyframes display_submenus {
 0% {
opacity:0
}
 100% {
opacity:1
}
}

/* second level submenus default animation */
@keyframes display_submenus_second {
 0% {
opacity:0
}
 100% {
opacity:1
}
}


@media screen and (max-width:768px){
/* menu unorderlist layout */
.Flat_mega_menu > ul {
	height: auto;
	position:relative;
}

/* menu list items layout */
.Flat_mega_menu > ul > li {
	float: none;
	height: 60px;
	width: 100%;
	border-left: none;
	border-bottom: 1px solid #542961;
	position:relative;
}

/* submenu with four column layout */
.Flat_mega_menu ul li .submenu.four_col {
	display: none;
	z-index:999;
	left: 0px;
	top: 60px;
}

/* submenu with four column a tag layout */
.Flat_mega_menu ul li .submenu.four_col li a {
	width:auto;
}

/* submenu with four column title class layout */
.Flat_mega_menu ul li .submenu.four_col .title{
	margin-bottom: 16px;
}
/* mobile button layout */
.Flat_mega_menu .mobile_button{
	opacity:0;
}

/* mobile buton + fontawesome icon layout */
.Flat_mega_menu .mobile_button,
.Flat_mega_menu .fa.fa-bars {
	display: block;
	position: absolute;
	left: 0px;
	z-index: 999;
	height: 60px;
	width: 9%;
	cursor:pointer;
	min-width: 60px;
}

/* fontawesome icon layout */
.Flat_mega_menu .fa.fa-bars:before{
	color: #FFFFFF;
	font-size: 40px; 
	top: 10px;
	position: relative;
	left: 15px;
}
}

@media screen and (max-width:592px){

/* submenu with four column list items layout */
.Flat_mega_menu ul li .submenu.four_col li {
	float: left;
	width: 42%;
	margin-right: 1%;
	margin-left: 5%;
}

/* submenu with four column title class layout */
.Flat_mega_menu ul li .submenu.four_col .title {
	margin: 2% 1% 2% 5%;
}

/* submenu with four column title class layout */
.Flat_mega_menu ul li .submenu.four_col .title:nth-child(3),
.Flat_mega_menu ul li .submenu.four_col .title:nth-child(4) {
	display:none;
}

/* submenu with four column title class layout */
.Flat_mega_menu ul li .submenu.four_col .title{
	margin-bottom: 26px;
}
}
.hoverdown:hover {
    content:'';
    margin-left: 0px;
    width: 0;
    height: 0;
    border-top: solid 20px #e15915;
    border-left: solid 20px transparent;
    border-right: solid 20px transparent;
}

<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>


<div class="Flat_mega_menu">

<i class="fa fa-bars"></i>			<!-- fontawesome mobile button icon -->
<input class="mobile_button" type="checkbox">		

	<ul>

    	<li class="hoverdown"><a href="#">More</a>
        	<ul class="submenu four_col">
                
                <li><a href="#">Submneu</a></li>

            </ul>
        </li>

    </ul>
</div>

<!-- mega menu end -->

</body>

</html>

谢谢

【问题讨论】：

问题中没有 javascript 或 jquery，真的，这样一个简单的任务不需要任何东西

标签： javascript jquery html css

【解决方案1】：

您正在更改.hoverdown 的样式，您的<li> 本身在悬停时，这就是您无法实现箭头效果的原因。

相反，您需要在悬停时添加一个元素，而不是在悬停时编辑现有元素的样式（可能使用:after 伪元素）

Codepen here

只需将您的.hoverdown:hover 替换为下面的一个

.hoverdown:hover:after{
    content: "";
    display: block;
    border: 12px solid transparent;
    border-top-color: #000;
    position: absolute;
    top: 60px;
    right: 4%;
}

我注意到的另一个问题是您将悬停时 <a> 的颜色更改为与背景相同的颜色，因此看起来它隐藏在 <li> 悬停时，请将其更改/覆盖为

.Flat_mega_menu > ul > li:hover a {
  color: white; //NOT #613570
}

更新：

要在每个<li> 下方显示箭头，然后添加以下样式（为后续<li> 保持递增10%） - Codepen 上方已更新

.hoverdown:nth-child(2):hover:after {
  right: 14%;
}

.hoverdown:nth-child(3):hover:after {
  right: 24%;
}
...

这种方法并不理想，因为最好的方法是更改菜单构建方式的整个逻辑，使 <li> position: relative & 然后 :after 成为 position:absolute父 <li> 以及对您的子菜单进行一些很好的更改（如果您想重新考虑逻辑）:-)

【讨论】：

但箭头通常显示为 div : absolute;我想在我悬停的每个 li 的底部特别显示箭头？有解决办法吗？
是的，在这种情况下，您可能需要更改构建菜单的整个逻辑。既然现在可能太多了，你可以按照我上面提到的来得到你想要的。如果您遇到任何其他问题，请告诉我。

【解决方案2】：

如果我理解你的话应该是这样的：

Example

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="Flat_mega_menu">

<i class="fa fa-bars"></i>          <!-- fontawesome mobile button icon -->
<input class="mobile_button" type="checkbox">       

    <ul>

        <li class="hoverdown">
            <a href="#">More1</a>
            <div class="arrow"></div>
            <ul class="submenu four_col"> 
                <li><a href="#">Submneu1</a></li>
            </ul>
      </li>
        <li class="hoverdown">
            <a href="#">More2</a>
            <div class="arrow"></div>
            <ul class="submenu four_col"> 
                <li><a href="#">Submneu2</a></li>
            </ul>
      </li>
    </ul>
</div>

<!-- mega menu end -->

</body>

</html>

CSS代码：

/* body layout */
body {
    background:#1b1c20;
}

/* flat mega menu layout start */
.Flat_mega_menu ul,
.Flat_mega_menu li,
.Flat_mega_menu a,
.Flat_mega_menu p,
.Flat_mega_menu i {
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    display: block;
}

/* mega menu layout */
.Flat_mega_menu {
    font-family: Nunito;        /* google webfont nunito */
    min-height: 60px;
    width: 100%;
    min-width: 240px;
    max-width: 1280px;
    position: relative;
    z-index: 999;
    background: #613570;
}

/* menu unorderlist layout */
.Flat_mega_menu > ul {
    width: 100%;
    height: 60px;
}

/* menu list items layout */
.Flat_mega_menu > ul > li {
    float: right;
    height: 60px;
    width: 10%;
    border-left: 1px solid #542961;
    white-space: nowrap;
}

/* menu a tag + user_login + search_bar hover effect */
.Flat_mega_menu > ul > li:hover a,
.Flat_mega_menu ul .user_login:hover .fa.fa-user,
.Flat_mega_menu ul .search_bar:hover .fa.fa-search {
    color: #613570;
    transition: all 0.2s linear 0s;
    -moz-transition: all 0.2s linear 0s;
    -webkit-transition: all 0.2s linear 0s;
    -ms-transition: all 0.2s linear 0s;
    -o-transition: all 0.2s linear 0s;

}

/* menu a tag layout */
.Flat_mega_menu ul li a {
    color: #FFFFFF;
    text-align: center;
    line-height: 60px;
    font-size: 16px;
    float: left;
    width: 100%;
}



/* submenu display none */
.Flat_mega_menu ul li .submenu {
    display: none
}

/* submenu with four column layout */
.Flat_mega_menu ul li .submenu.four_col {
    display: none;
    position: absolute;
    left: 0px;
    top: 60px;
    width: 100%;
    min-height:35px;
    background: #FFFFFF;
    border-bottom: 5px solid #613570;
}

/* submenu with four column list items layout */
.Flat_mega_menu ul li .submenu.four_col li {
    float: right;
    width: 10%;
}

/* submenu with four column a tag layout */
.Flat_mega_menu ul li .submenu.four_col li a {
    color: #555658;
    text-align: left;
    white-space: normal;
    line-height: 40px;
    margin-bottom: 1px;
    font-size: 14px;
}

/* submenu with four column a tag hover effct */
.Flat_mega_menu ul li .submenu.four_col li:hover a {
    text-indent: 5px;
    color: #000000
}

/* submenu with four column title class layout */
.Flat_mega_menu ul li .submenu.four_col .title {
    font-size: large;
    margin: 2%;
    font-weight: bold;
}


/* mouse hover display submenus */
.Flat_mega_menu ul li:hover .submenu.one_col,
.Flat_mega_menu ul li:hover .submenu.two_col,
.Flat_mega_menu ul .search_bar:hover ul,
.Flat_mega_menu ul .user_login:hover ul,
.Flat_mega_menu ul .social_bar:hover ul,
.Flat_mega_menu ul li:hover .submenu.img_container,
.Flat_mega_menu ul li:hover .submenu.four_col {
    display: block;

    /* animation */
    animation: display_submenus 0.2s linear 0s 1 forwards;
    -webkit-animation: display_submenus 0.2s linear 0s 1 forwards;
    -moz-animation: display_submenus 0.2s linear 0s 1 forwards;
    -ms-animation: display_submenus 0.2s linear 0s 1 forwards;
    -o-animation: display_submenus 0.2s linear 0s 1 forwards;
}

/* second level submenu hover effect */
.Flat_mega_menu ul li .submenu.one_col li:hover > .submenu.one_col {
    display: block;

    /* animation */
    animation: display_submenus_second 0.2s linear 0s 1 forwards;
    -webkit-animation: display_submenus_second 0.2s linear 0s 1 forwards;
    -moz-animation: display_submenus_second 0.2s linear 0s 1 forwards;
    -ms-animation: display_submenus_second 0.2s linear 0s 1 forwards;
    -o-animation: display_submenus_second 0.2s linear 0s 1 forwards;
}

/* checkbox button layout */
.Flat_mega_menu .mobile_button,
.Flat_mega_menu .fa.fa-bars {
    display:none;
}


/* default animation keyframes */
@keyframes display_submenus {
 0% {
opacity:0
}
 100% {
opacity:1
}
}

/* animation for chrome and safari */
@-webkit-keyframes display_submenus {
 0% {
opacity:0
}
 100% {
opacity:1
}
}

/* animation for firefox */
@-moz-keyframes display_submenus {
 0% {
opacity:0
}
 100% {
opacity:1
}
}

/* animation for internet explorer 10+ */
@-ms-keyframes display_submenus {
 0% {
opacity:0
}
 100% {
opacity:1
}
}

/* animation for opera */
@-o-keyframes display_submenus {
 0% {
opacity:0
}
 100% {
opacity:1
}
}

/* second level submenus default animation */
@keyframes display_submenus_second {
 0% {
opacity:0
}
 100% {
opacity:1
}
}


@media screen and (max-width:768px){
/* menu unorderlist layout */
.Flat_mega_menu > ul {
    height: auto;
    position:relative;
}

/* menu list items layout */
.Flat_mega_menu > ul > li {
    float: none;
    height: 60px;
    width: 100%;
    border-left: none;
    border-bottom: 1px solid #542961;
    position:relative;
}

/* submenu with four column layout */
.Flat_mega_menu ul li .submenu.four_col {
    display: none;
    z-index:999;
    left: 0px;
    top: 60px;
}

/* submenu with four column a tag layout */
.Flat_mega_menu ul li .submenu.four_col li a {
    width:auto;
}

/* submenu with four column title class layout */
.Flat_mega_menu ul li .submenu.four_col .title{
    margin-bottom: 16px;
}
/* mobile button layout */
.Flat_mega_menu .mobile_button{
    opacity:0;
}

/* mobile buton + fontawesome icon layout */
.Flat_mega_menu .mobile_button,
.Flat_mega_menu .fa.fa-bars {
    display: block;
    position: absolute;
    left: 0px;
    z-index: 999;
    height: 60px;
    width: 9%;
    cursor:pointer;
    min-width: 60px;
}

/* fontawesome icon layout */
.Flat_mega_menu .fa.fa-bars:before{
    color: #FFFFFF;
    font-size: 40px; 
    top: 10px;
    position: relative;
    left: 15px;
}
}

@media screen and (max-width:592px){

/* submenu with four column list items layout */
.Flat_mega_menu ul li .submenu.four_col li {
    float: left;
    width: 42%;
    margin-right: 1%;
    margin-left: 5%;
}

/* submenu with four column title class layout */
.Flat_mega_menu ul li .submenu.four_col .title {
    margin: 2% 1% 2% 5%;
}

/* submenu with four column title class layout */
.Flat_mega_menu ul li .submenu.four_col .title:nth-child(3),
.Flat_mega_menu ul li .submenu.four_col .title:nth-child(4) {
    display:none;
}

/* submenu with four column title class layout */
.Flat_mega_menu ul li .submenu.four_col .title{
    margin-bottom: 26px;
}
}

.arrow{
  width: 0; 
  height: 0; 
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid #e15915;
  display:none;
  position:relative;
  top:50%;
  left:50%;
  margin-left:-20px;
  margin-top:-10px;
}
.hoverdown:hover .submenu four_col{
    display:block;
}
.hoverdown:hover .arrow{
   display:block;
}

【讨论】：