02.ドロップダウンリストのCSS

作成日: 2022/08/23 更新日: 2023/03/25 サイトの紹介と使い方

• top
• プログラム言語
• HTMLとCSS
• CSS例
• [ 02.ドロップダウンリストのCSS ]

初めに

1. ドロップダウンリストのCSSです。

ソースコード

/*<--- 0202 ドロップダウンリスト */
.my-dropdown_list{
  width: auto;
}
.my-dropdown-list-parent{
  display:          inline-block;
  width:            15.0rem;
  height:           3.0rem;
  font-size:        1.5rem;
  font-weight:      normal;
  text-align:       center;
  background-color: #00FFFF;
  list-style:       square-button;
  border-style:     solid;
  border-radius:    1.0rem;
}
.my-dropdown-list-parent:hover{
  background-color: #FFFF00;
}
.my-dropdown-list-parent a{
  text-decoration: none;
}
.my-dropdown-list-child{
  display: none;
  width:   10.0rem;
}
.my-dropdown-list-parent:hover .my-dropdown-list-child{
  display:  block;
  position: absolute;
}
.my-dropdown-list-child li{
  display:  block;
  position: relative;
}
.my-dropdown-list-child li a{
  display:          block;
  position:         relative;
  list-style-type:  inside;
  margin:           -0.2rem 0 -0.4rem -3.0rem;
  width:            15.0rem;
  height:           2.5rem;
  font-size:        1.2rem;
  background-color: #00FF00;
  text-decoration:  none;
  list-style:       square-button;
  border-style:     solid;
  border-radius:    1.0rem;
}
.my-dropdown-list-child li a:hover{
  background-color:	#008000;
}
/* 0202 --->*/

お問合せ・御要望

お問合せ