navメニューのcssがうまく適応されない

Question

サイドバーにcssを当ててhoverされた時に、横に広がりpタグが見えるようにしたい。
hoverされる前は画像が表示されていてpタグは非表示にしたいのでdisplay: noneをつけたのですがうまく適応されていません。
自分ではわからなかったので質問させていただきました。

<nav>
  <ul>
    <li>
      <img src="/images/navbar/home.svg" />
      <p>home</p>
    </li>
    <li>
      <img src="/images/navbar/search.svg" />
      <p>search</p>
    </li>
    <li>
      <img src="/images/navbar/profile.svg" />
      <p>profile</p>
    </li>
    <li>
      <p>logout</p>
    </li>
  </ul>
</nav>

nav {
  position: fixed;
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  width: 75px;
  height: 100vh;
  background: #00E39F;
  box-shadow: 1px 0px 0px #e1e6ed;
  transition: all 0.2s ease-in-out;
  z-index: 10;
}
  
 ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    list-style: none;
    margin: 0px;
    padding: 10px;
  }
  
  
li{
    list-style:none;
    height: 50px;
    color: #000000;
    font-size: 14px;
    letter-spacing: 0.06em;
    padding-top: 10px;
    img {
      vertical-align: middle;
    }
    p {
      display: none;
      vertical-align: middle;
    }
  }

  nav:hover {
    width: 200px;
    transition: all 1.3s;
    transition-property: background;
    transition: all 0.2s ease-in-out;
    ul {
      margin-left: 10px;
      align-items: flex-start;
    }
    p {
      display: inline-block;
      margin-left: 10px;
    }
  }
li:hover {
      transform: scale(1);
      font-weight: bold;
}
```

Answer 1

あなたが書いているのはSCSSですね。CSSには、入れ子になったスタイルは書けません。

提示されているHTMLファイルの内容にスタイルシートを読む部分が含まれていないため、実際にどうしているかはわかりませんが、もし提示されたSCSSの内容をそのままCSSとして読み込んでいるのなら、うまく表示されないのは当然です。

何らかの方法(Sassを使うとか、エディターの拡張機能を使うとか)でSCSSで書かれたファイルからCSSファイルを生成し、それをHTMLファイルで読み込んでください。

Comments

[aaattt]

https://codepen.io/ka11taniya/pen/RwRYRdV

[aaattt]

codepenでやっていました。よければ見て欲しいです。

[Daregada]

ええと、CodePenのほうでは、SCSSの2つめのスタイル(セレクターがul)に「list-style: none;dd」と書いてあって、質問文のSCSSにはないゴミ(末尾のdd)が付いています。これを消してください。

[aaattt]

みてみましたがどこにもついてないです

[Daregada]

cssの先頭から18行目に付いています。それを消すと、CSSが正しく適用されてhoverなどが想定通りに動いています。こちらではね。

[aaattt]

ありがとうございます。ddを消したらhoverされるようになりました。hover中に文字が曲がって表示されるのですが綺麗にhoverするにはどうしたらいいのでしょう？