html, body { margin: 0; } header { width: 100%; height: 60px; background-color: #323232; position: fixed; text-align: center; } .header-links { height: 60px; position: absolute; display: inline-block; margin-left: -194px; } .header-links>ul { margin-top: 0px; float: left; } .header-links>ul>li { display: inline-block; width: 100px; height: 60px; } .header-links>ul>li>a { display: block; margin-top: 40px; font-family: 'Poiret One', cursive; text-decoration: none; color: #fff; } #header-triangle { width: 0; height: 0; border-top: 30px solid #323232; border-right: 50px solid transparent; border-left: 50px solid transparent; top: 60px; margin: 0 auto; position: relative; } #link-main:hover #header-triangle { left: -150px; } 
 <header> <div class="header-links"> <ul> <li id="link-main"><a href="">Ссылка</a></li> <li><a href="">Ссылка</a></li> <li><a href="">Ссылка</a></li> </ul> </div> <div id="header-triangle"></div> </header>
Problem: # link-main: hover # header-triangle {left: -150px; }

  • Inside it is necessary. - Qwertiy ♦
  • The <ul>? ... tag - BigTows
  • on css, do not do this with the current html structure. - Andrey Fedorov
  • Nope, in pseudo-li. - Qwertiy ♦

2 answers 2

 *{ padding: 0; margin: 0; box-sizing: border-box; } html, body { margin: 0; } header { width: 100%; height: 60px; background-color: #323232; position: fixed; text-align: center; } .header-links { height: 60px; position: absolute; display: inline-block; margin-left: -194px; } .header-links>ul { margin-top: 0px; float: left; } .header-links>ul>li { display: inline-block; width: 100px; height: 60px; transition: .3s; } .header-links>ul>li>a { display: block; margin-top: 40px; font-family: 'Poiret One', cursive; text-decoration: none; color: #fff; } .header-links>ul>li.triangle{ position: absolute; top: 100%; left: 100px; display: block; width: 0; height: 0; border-top: 30px solid #323232; border-right: 50px solid transparent; border-left: 50px solid transparent; margin: 0 auto; transition: .3s; } .header-links>ul>li:hover:first-child ~ .triangle{ left: 0; } .header-links>ul>li:hover:nth-child(2) ~ .triangle{ left: 100px; } .header-links>ul>li:hover:nth-child(3) ~ .triangle{ left: 200px; } 
 <header> <div class="header-links"> <ul> <li id="link-main"><a href="">Ссылка</a></li> <li><a href="" class="active">Ссылка</a></li> <li><a href="">Ссылка</a></li> <li class="triangle"></li> </ul> </div> </header> 

     html, body { margin: 0; } ul, li { list-style: none; } header { width: 100%; height: 60px; background-color: #323232; position: fixed; text-align: center; } .header-links { height: 60px; display: inline-block; } .header-links > ul { margin-top: 0px; display: flex; justify-content: center; position: relative; } .header-links > ul > li { display: inline-block; width: 100px; height: 60px; text-align: center; } .header-links > ul > li > a { display: block; margin-top: 40px; font-family: 'Poiret One', cursive; text-decoration: none; color: #fff; } #header-triangle { width: 0; height: 0; border-top: 30px solid #323232; border-right: 50px solid transparent; border-left: 50px solid transparent; position: absolute; left: 50%; top: 60px; transform: translatex(-30px); transition: .2s; } .header-links > ul > li:hover:nth-child(1) ~ #header-triangle { left: calc(50% - 100px); } .header-links > ul > li:hover:nth-child(3) ~ #header-triangle { left: calc(50% + 100px); } 
     <header> <div class="header-links"> <ul> <li id="link-main"><a href="">Ссылка</a> </li> <li><a href="">Ссылка</a> </li> <li><a href="">Ссылка</a> </li> <li id="header-triangle"> </li> </ul> </div> </header>