如何在悬停时创建像箭头一样的向下三角形

时间：2016-10-10 07:38:41

标签： javascript jquery html css css3

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

这是我的片段：

＆＃13;
＆＃13; 
/* 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;
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

由于

2 个答案:

答案 0 :(得分：2)

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

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

Codepen here

只需将.hoverdown:hover替换为下面的<{p>> 

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

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

.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＆amp;然后:after为position:absolute父母<li>＆amp;你的子菜单也有一些很大的变化（如果你想重新考虑逻辑）： - ）

答案 1 :(得分：1)

如果我理解你的意思，那应该是这样的：

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;
}
相关问题
最新问题