Блог

Я пытаюсь создать карусель из меню верхнего заголовка. Я написал стили, но есть кое-что неожиданное: ссылки меню преобразованы в столбец. Когда я добавил display: flex; flex-flow: row nowrap; в .top_menu , он преобразовался обратно в встроенный. Но теперь я вижу только первую ссылку. Как я могу это исправить или есть другие способы сделать карусель в верхнем заголовке? Сам код:

 <div class="top_header">


<table cellpadding="0" cellspacing="0" style="width: 98%;" align="center">
<tbody><tr>
<td align="left" valign="bottom">
<a href="./"><img src="./images/logo_new.png" border="0" alt=""></a>
</td>
  <td align="right" valign="bottom" style="padding-bottom: 10px;">
   <table cellpadding="0" cellspacing="0" style="width: 98%;" align="center">
    <tbody><tr>
      <td nowrap="nowrap" class="top_menu">
        <div class="top_menu_link_container">
          <div class="top_menu_link">
       <div class="top_menu_link_container">

@keyframes scroll {0% {transform: translate(0, 0)} 100% {transform: translate(-100%, 0)}}

.top_menu_link_container{
padding-left: 100%;
animation: scroll 15s infinite linear}

.top_menu {
width: 100%;
white-space: nowrap;
overflow: hidden;}
  

И Codepen, если это поможет https://codepen.io/sergeigyr/pen/qBZZRbX