li要素の謎の改行、縦書きみたいになってしまう

Question

要素の横幅を指定した覚えがないのになぜか改行されて縦書きのようになってしまいます。

html

<header class="header">
<div class="header"></div>
<div class="header__account">
<div class="header__account__clock">2020/4/7
17:57 (Tue)</div>
<ul class="header__account__hover" style="display: none;">
<li class="header__account__hover__li">
newer
</li>
<li class="header__account__hover__li">
<a class="header__name__logout" rel="nofollow" data-method="delete" href="/members/sign_out">ログアウト</a>
</li>
</ul>
</div>
<div class="header__nav">
<div class="header__nav__menu">
Menu
</div>
<ul class="header__nav__hover" style="display: none;">
<li class="header__nav__hover__li">
<a href="/">TOP
</a></li>
<li class="header__nav__hover__li">
<a href="/reservations">予約
</a></li>
<li class="header__nav__hover__li">
<a href="/clients">クライアント
</a></li>
<li class="header__nav__hover__li">
<a href="/members">メンバー
</a></li>
<li class="header__nav__hover__li">
<a href="/drinks">ドリンク
</a></li>
</ul>
</div>
</header>

書いたのはhaml

.header__account
          .header__account__clock
          %ul.header__account__hover
            
            %li.header__account__hover__li
              = current_member.name
            %li.header__account__hover__li
              = link_to "ログアウト", destroy_member_session_path, method: :delete, class: "header__name__logout"
        
        .header__nav
          .header__nav__menu
            Menu
          %ul.header__nav__hover
            %li.header__nav__hover__li
              = link_to root_path do
                TOP
            %li.header__nav__hover__li
              = link_to reservations_path do
                予約
            %li.header__nav__hover__li
              = link_to clients_path do
                クライアント
            %li.header__nav__hover__li
              = link_to members_path do
                メンバー
            %li.header__nav__hover__li
              = link_to drinks_path do
                ドリンク

scss

.header{
  z-index: 1000;
  position: fixed;
  top: 10px;
  left: 10px;
  &__account__clock{
    border-radius: 10px;
    line-height: 45px;
    padding: 0 24px;
    font-size: 19px;
    background-color: $color8;
    color:  $color4;
  }
  &__account__hover__li{
    line-height: 45px;
    margin: 10px 0;
    font-size: 19px;
    border-radius: 40px/22.5px;
    color: $color4;
    &>a{
      color: $color4;
    }
  }
  &__account{
    display: inline-block;
    position: relative;
    &__hover{
      position: absolute;
      transform: translateX(-50%);
      left: 50%;
      width: 200px;
      text-align: center;
      display: none;
      &__li{
        background-color: $color8;
      }
    }
    
  }
  &__nav{
    vertical-align: top;
    display: inline-block;
    margin-left: 10px;
    position: relative;
    &__menu{
      display: inline-block;
      background-color: $color5;
      color:  white;
      border-radius: 10px;
      line-height: 45px;
      padding: 0 24px;
      font-size: 19px;
      background-color: $color5;
    }
    &__hover{
      position: absolute;
      top: 0;
      left: 110%;
      display: flex;
      flex-direction: row;

      &__li{
        display: inline-block;
        & > a{
          text-align: center;
          display: inline-block;
          border-radius: 10px;
          line-height: 45px;
          padding: 0 24px;
          font-size: 19px;
          background-color: $color5;
        }
      }
    }
    
  }
}

原因を教えていただけるとありがたいです。

Comments

[yambejp]

ご利用の言語をタグづけしてください
HTMLとcssで処理するなら、再現性のあるそれなりのソースを
例示ください

[annaPanda]

ご指摘ありがとうございます。
おそらくこれで再現できるかと思います。

Answer 1

とりあえず、こうすれば広がります。

    &__hover{
      /* position: absolute; 削除する*/
      top: 0;
      left: 110%;
      display: flex;
      flex-direction: row;

個人的な見解ですが、absolute配置は難しいので、初心者は安易に取り扱うべきではないと思います。

参考：
The width of absolute or fixed positioned, non-replaced elements | CSS Positioned Layout Module Level 3

Comments

[annaPanda]

あ、ここが原因なんですね。
position: absolute;を使わない方法を模索してみます。
ありがとうございました。

Answer 2

display: inline-block;
これがあやしそうですね。。。

Comments

[annaPanda]

今試しに全ての
display: inline-block;
を一つずつコメントアウトしてみましたが、思うような変化はありませんでした。
どのdisplay: inline-block;をどのように変更すれば良いでしょうか？