[Karlapoiss]

Oleks vaja abi ühe efektiga,

Mitu päeva juba pealt näha lihtsa asjaga mässanud
See kuldne joon mis tekib alammenüüle peaks sujuvalt sisse jooksma vasakult paremale kui minna peale ülemmenüü elemendile, ehk efekt tekib siis kui liikuda Leht1/leht2 peale, mitte alles siis kui alammenüüs ringi liikuda.

Hetkel olemas:

https://jsfiddle.net/907bwv0o/

HTML

Spoiler

<nav id="menu" class="menu">                   <ul class="dropdown">                     <li><a href="#">leht</a></li>                     <li class="active">                      <a href="#">leht1</a>                      <ul class="dropdown_nav">                        <li class="dropdown_first active_drop">                   <a href="#">leht1.1</a></li>                        <li class="dropdown_last"><a href="#">leht1.2</a></li>                      </ul>                     </li>                     <li>                      <a href="#">leht2</a>                      <ul class="dropdown_nav">                        <li class="dropdown_first"><a href="#">leht2.1</a></li>                        <li><a href="#">leht2.2</a></li>                      </ul>                     </li>                     <li><a href="#">leht3</a></li>                     <li><a href="#">leht4</a></li>                   </ul>                  </nav>

CSS

Spoiler

.menu {   width: 100%;   height: auto;   background: white;   transition: all 0.3s ease; } .menu ul {   padding: 0px;   margin: 0px;   list-style: none;   position: relative;   display: inline-block;   width:100%; } .menu > li > ul.sub_menu {   min-width: 10em;   padding: 4px 0;   background-color: #f4f4f4;   border: 1px solid #fff; } .menu ul li { padding: 0px; } .menu ul li.active a{    font-weight:600; } .second_menu ul li.active a{    font-weight:600; } .menu > ul > li { display: inline-block; } .menu ul li a {   display: block;   text-decoration: none;   color: black;    font-family: 'Lato';    font-weight:400;    font-size:14px; } .menu ul li a:hover {   color: black; } .menu ul li.hover > a {   color: black; } .menu ul li > a { padding: 15px; } .menu ul ul {   display: none;   position: absolute;   top: 100%;   width:auto;   background: white; } .dropdown_nav{     border-top: 1px solid #b6945d; } .menu ul li.active_drop a{    font-weight:600 !important;    color:#b6945d; } .menu ul li ul.dropdown_nav li a{    font-weight:400; } .menu ul li.active_drop a:hover{    color:#b6945d; } .menu ul li:hover > ul {     display: block; } .menu ul ul > li {    position: relative;     display: inline;     float: left;     width: auto; } .menu ul ul > li a {   padding: 10px 15px;   height: auto;   background: white;   font-style:italic; } .menu ul ul > li a:hover {   color: black; } .menu ul ul ul {   position: absolute;   left: 100%;   top: 0; }

[VilX]

Hetkel ma mingit animatsiooni praeguses fiddle'is ei näe.
Kas ma saan õigesti aru, et soovid animeerida kuldset borderit vasakult paremale jooksma sel hetkel, kui hover on esimese taseme menüül?

[Karlapoiss]

[VilX]

[Karlapoiss]