Quando você passa o mouse em cima de qualquer item o ultimo item do menu fica abrindo sozinho
https://codepen.io/admtwbful/pen/bGzdMEB
.wrapper {
width: 100%;
padding: 5px;
margin: 0 auto;
clear: both;
text-align: center;
vertical-align: middle;
display: flex;
justify-content: center;
align-items: center;
}
ul.menu {
width: 100%;
/* Se colocar 100% ele vai pro canto direito, se colocar 900px vai para o canto esquerdo o menu */
margin: 0 auto;
}
ul.menu li {
cursor: pointer;
float: left;
height: 50px;
list-style: none;
position: relative;
width: 60px;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
}
li.menu a {
display: inline;
width: 60px;
height: 50px;
text-decoration: none;
color: #fff;
position: absolute;
transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
text-align: center;
vertical-align: middle;
display: flex;
justify-content: center;
align-items: center;
}
ul.menu:first-child a {
background: #e8c813;
}
ul.menu li:nth-child(2) a {
background: #ad1515;
}
ul.menu li:nth-child(3) a {
background: #15ad36;
}
ul.menu li:nth-child(4) a {
background: #2112a8;
}
ul.menu li:nth-child(5) a {
background: #157dad;
}
ul.menu li:nth-child(6) a {
background: #000000;
}
ul.menu li:nth-child(7) a {
background: #9f9f00;
}
li.menu:first-child:hover {
background: #e8c813;
}
li.menu:nth-child(2):hover {
background: #ad1515;
}
li.menu:nth-child(3):hover {
background: #15ad36;
}
li.menu:nth-child(4):hover {
background: #2112a8;
}
li.menu:nth-child(5):hover {
background: #157dad;
}
li.menu:nth-child(6):hover {
background: #000000;
}
li.menu:nth-child(7):hover {
background: #9f9f00;
}
ul.menu li:hover a {
background-position: center;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
}
ul.menu li:hover {
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
width: 160px;
}
p.menu {
color: #ffffff;
font-size: 15px;
height: 50px;
width: 200px;
letter-spacing: 0;
text-align: center;
margin: 0px auto;
vertical-align: middle;
display: flex;
justify-content: center;
align-items: center;
display: none;
}
.menu:hover p {
color: #ffffff;
font-size: 15px;
height: 50px;
width: 200px;
letter-spacing: 0;
text-align: center;
margin: 0px auto;
vertical-align: middle;
display: flex;
justify-content: center;
align-items: center;
}
/*font-face*/
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 100;
src: local('Lato Hairline'), local('Lato-Hairline'), url(http://themes.googleusercontent.com/static/fonts/lato/v6/boeCNmOCCh-EWFLSfVffDg.woff) format('woff');
}
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 300;
src: local('Lato Light'), local('Lato-Light'), url(http://themes.googleusercontent.com/static/fonts/lato/v6/KT3KS9Aol4WfR6Vas8kNcg.woff) format('woff');
}
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
src: local('Lato Regular'), local('Lato-Regular'), url(http://themes.googleusercontent.com/static/fonts/lato/v6/9k-RPmcnxYEPm8CNFsH2gg.woff) format('woff');
}
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 700;
src: local('Lato Bold'), local('Lato-Bold'), url(http://themes.googleusercontent.com/static/fonts/lato/v6/wkfQbvfT_02e2IWO3yYueQ.woff) format('woff');
}
<div class="wrapper">
<ul class="menu">
<li class="menu">
<a href="">A</a>
<p class="menu"> ABBA </p>
</li>
<li class="menu">
<a href="">V</a>
<p class="menu"> VI </p>
</li>
<li class="menu">
<a href="">M</a>
<p class="menu"> Mukka </p>
</li>
<li class="menu">
<a href="">U</a>
<p class="menu"> Utility </p>
</li>
<li class="menu">
<a href="">P</a>
<p class="menu"> Pcs </p>
</li>
<li class="menu">
<a href="">B</a>
<p class="menu"> Biosho </p>
</li>
<li class="menu">
<a href="">N</a>
<p class="menu"> Notivi </p>
</li>
</ul>
</div>