转换CSS下拉菜单奇怪的行为

时间:2016-09-06 23:41:09

标签: html css css3 css-transitions transition

所以,我在CSS中做了一个下拉菜单,我遇到了这个问题,当你将鼠标悬停在下拉菜单(功能)上,然后将鼠标移除时出现故障并跳转。 Here's the pen以及代码:



        string strfinal;
        string frase = "", texto = "";
        string textoAEncontrar;
        Console.WriteLine("Insira algum texto (carregue no * para terminar a escrita): ");

        for (texto = ""; !texto.Equals("*");)
        {
            texto = Console.ReadLine();
            if (texto.Length < 100)
            {
                frase = frase + " " + texto;
            }
        }


        strfinal = frase.Substring(1, frase.Length - 2);

        Console.WriteLine(strfinal);

        Console.WriteLine("O que deseja encontrar no texto escrito: ");
        textoAEncontrar = Console.ReadLine();
        int primeiraReferenciaNoTexto = strfinal.IndexOf(textoAEncontrar);
        int ultimaReferenciaNoTexto = strfinal.LastIndexOf(textoAEncontrar);


        if (strfinal.Contains(textoAEncontrar))
            {

                Console.WriteLine("A palavra {0} existe no index {1}", textoAEncontrar, primeiraReferenciaNoTexto);
                Console.WriteLine("A palavra {0} existe no index {1}", textoAEncontrar, ultimaReferenciaNoTexto);
            }
            else
            {
                Console.WriteLine("A palavra {0} não existe", textoAEncontrar);
            }



    }
}
&#13;
.cb{ width: 90%; margin: 0 auto; max-width: 1200px;}

a{
	color: inherit;
	text-decoration: inherit;
}

body{
  background: #000;
  font-family: 'Roboto Condensed';
  font-weight: 300;
}

header{
	height: 100px;
	width: 100%;
	background: #fff;
	position: relative;
}

.logo{
	float: left;
	margin-top: 30px;
}

header nav{
	float: right;
	height: 100px;
}

header nav > ul{
	height: 100px;
  padding: 0;
}

header nav > ul > li{
	height: 100px;
	line-height: 100px;
	display: inline-block;
	list-style: none;
}

header nav > ul > li > a{
	height: 100px;
	display: block;
	padding: 0 30px;
	transition: all .22s;
}

header nav > ul > li > a:hover{
	color: #F78819;
}

header nav > ul > li > a:hover:after{
	transform: rotate(180deg);
}

.dropdown_icon{
	position: relative;
	cursor: pointer;
}

.dropdown_icon:after{
	position: absolute;
	display: block;
	font-family: 'FontAwesome';
	font-weight: 400;
	content: "\f107";
	top: -1px;
	font-size: 14px;
	right: 14px;
	transition: transform .22s;
}

.dropdown_item:hover ul{
  transform: scaleY(1);
}

header nav ul li ul{
	position: absolute;
	width: 100%;
	transform: scaleY(0);
	transform-origin: 50% 0%;
	background: #F78819;
	left: 0;
	right: 0;
	top: 100%;
	text-align: center;
	height: 50px;
	transition: all .3s;
}

header nav ul li ul li{
	display: inline-block;
	height: 50px;
	line-height: 50px;
	vertical-align: 50px;
}

header nav ul li ul li a{
	color: #fff;
	height: 50px;
	transition: all .22s;
	display: block;
	padding: 0 20px;
}

header nav ul li ul li a:hover{
	color: #444;
}
&#13;
&#13;
&#13;

提前感谢!

0 个答案:

没有答案