プルダウンメニューの作成について

Question

現在、プルダウンメニューの作成に挑戦しております。
しかし、実現したいレイアウトになかなか出来ない為、質問させて貰いました。

<div class="content" >
      <h4>項目一覧</h4>
      <div class="drop_down_1">
        <p class="item_1">テスト1</p>
        <div class="arrow"></div>
      </div>
    </div>

 .item_1::before{
   content:"";
    width: 10%;
    height: 10%;
    border-radius: 50%;
    background: skyblue;
  }
  .drop_down_1{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    border-top: solid 1px #CBCBCB;
    border-bottom: solid 1px #CBCBCB;
  }
    .arrow{
    width:1%;
    height:1%;
    border: 3px solid;
    border-color:  transparent transparent #CBCBCB #CBCBCB;
    transform: rotate(-45deg);
  }

こちらは自分で作成したコードになります。

以下が作成したいプルダウンメニューになります。

下向き矢印を押した場合にのみ、以下のように内容を表示する形にしたいと考えています。

現状の問題点なのですが、丸い色のついた部分が表示されず、下三角のマークが見切れているような状態になってしまっています。
こちら、jsfiddleにて、動作確認可能な状態になっております為、ご確認頂けましたら幸いです。
お手数ですが、ご助言の程よろしくお願いします。

追記です

丸を表示させる部分につきましては、content:"";を content:"\3000";と、Unicode文字列を指定する事で解決出来ました。

Comments

[tr_09]

純粋に、丸に関しては
content:"";をcontent:"　";
空白を入れることで表示されるかと思います。
やってみてください！

[study_111]

おお！丸を表示させる事が出来ました。ありがとうございます！

[tr_09]

いけそうですか？？？

[study_111]

無事解決出来ました！

[tr_09]

おめでとうございますーー！！！

Answer 1

矢印に関しては、%で指定をせずpxで指定してみてはいかがでしょうか？

.arrow{
  margin: 25px 10px;
  width: 5px;
  height: 5px;
  border: 1px solid;
  border-color:  transparent transparent #565656 #565656;
  transform: rotate(-45deg);
  }

位置はmarginで調節できると思います！

Comments

[study_111]

ご回答ありがとうございます。
矢印なのですが、ご提示頂きました通り、ピクセルを指定する事で、解決出来ました。
「content:""」に指定する文字列なのですが、Vue.jsで開発していたのですが、、どうもスタイル指定の際に、全角の文字列を指定した場合に、エラーとなってしまいました為、Unicode文字列を指定し、こちらの問題を解決致しました。

[tr_09]

無事両方とも解決できてよかったです！！
私もまだまだ知識がないので、一緒に開発頑張りましょうね！！