admtwbful

Quando você passa o mouse em cima de qualquer item o ultimo item do menu fica abrindo sozinho https://codepen.io/admtwbful/pen/bGzdMEB CSS <style> .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%; 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'); } </style> HTML <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>